javascript - Chart.js 2.0 中可接受的背景突出显示范围

coder 2024-05-16 原文

我正在使用 Chart.js(2.0.2 测试版)构建一个简单的折线图，我想突出显示图表背景的特定范围以突出显示“可接受的范围”。

这是我想通过 Charts.js 重新创建的示例:

如果对您有帮助，以下是我目前所做的工作。这很简陋。任何正确方向的指导或插入将不胜感激!

var bgdata = {
     labels: ["12:00 AM", "1:00 AM", "2:00 AM", "3:00 AM", "4:00 AM", "5:00 AM", "6:00 AM", "7:00 AM", "8:00 AM", "9:00 AM", "10:00 AM", "11:00 AM", "12:00 PM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM", "6:00 PM", "7:00 PM", "8:00 PM", "9:00 PM", "10:00 PM", "11:00 PM"],
    datasets: [
    {
    label: "Average Hourly Blood Glucose Reading", 
    fill: false,
    backgroundColor: "rgba(29, 9, 158,0.2)",
    borderColor: "rgba(29, 9, 158,1)",
    data: [213, 199, 208, 191, 205, 181, 163, 133, 129, 186, 184, 137, 125, 126, 119, 120, 129, 133, 122, 156, 203, 207, 183, 211]
        }
    ]
 };

var bgChart = document.getElementById('bg').getContext('2d');
var bgLineChart = Chart.Line(bgChart, {
    data: bgdata,
    options: {
        scaleFontSize: 12,
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {min: 25, max: 250, stepSize: 25}
                }],
            },
        title: {display: true, text: 'Average Hourly Blood Glucose'},           
    }});

最佳答案

以下实现了 Chart.js 2.* 中所需的功能(使用 Chart.js 2.1.4，这是撰写本文时的最新版本):

https://jsfiddle.net/742zut83/22/

该实现基于扩展折线图类型并重写draw 函数。新的 draw 函数检查折线图的 data 中是否存在以下定义要突出显示的 y 范围的内容:

yHighlightRange : {
  begin: 6.5,
  end: 12.5
}

如果不存在，则调用原来的draw函数。如果它存在，则绘制一个从左到右跨越并在指定的 y 范围内的矩形。矩形绘制完成后，调用原来的draw函数，完成折线图的绘制。

第一个实现没有绘制矩形。除了它的其他缺陷外，它还单独绘制了所有像素线。就像电视扫描线(是的，我老了)。但是旧代码在这里(如果你关心画线):

https://jsfiddle.net/742zut83/17/

当前代码如下:

var ctx = document.getElementById("myChart");

// The original draw function for the line chart. This will be applied after we have drawn our highlight range (as a rectangle behind the line chart).
var originalLineDraw = Chart.controllers.line.prototype.draw;
// Extend the line chart, in order to override the draw function.
Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    var chart = this.chart;
    // Get the object that determines the region to highlight.
    var yHighlightRange = chart.config.data.yHighlightRange;

    // If the object exists.
    if (yHighlightRange !== undefined) {
      var ctx = chart.chart.ctx;

      var yRangeBegin = yHighlightRange.begin;
      var yRangeEnd = yHighlightRange.end;

      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];

      var yRangeBeginPixel = yaxis.getPixelForValue(yRangeBegin);
      var yRangeEndPixel = yaxis.getPixelForValue(yRangeEnd);

      ctx.save();

      // The fill style of the rectangle we are about to fill.
      ctx.fillStyle = 'rgba(0, 255, 0, 0.3)';
      // Fill the rectangle that represents the highlight region. The parameters are the closest-to-starting-point pixel's x-coordinate,
      // the closest-to-starting-point pixel's y-coordinate, the width of the rectangle in pixels, and the height of the rectangle in pixels, respectively.
      ctx.fillRect(xaxis.left, Math.min(yRangeBeginPixel, yRangeEndPixel), xaxis.right - xaxis.left, Math.max(yRangeBeginPixel, yRangeEndPixel) - Math.min(yRangeBeginPixel, yRangeEndPixel));

      ctx.restore();
    }

    // Apply the original draw function for the line chart.
    originalLineDraw.apply(this, arguments);
  }
});

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
    }],
    // This, if it exists at all, defines the highlight region.
    yHighlightRange: {
      begin: 6.5,
      end: 12.5
    }
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

关于javascript - Chart.js 2.0 中可接受的背景突出显示范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36685745/

javascript 突出 34 code section charts chart.js

有关javascript - Chart.js 2.0 中可接受的背景突出显示范围的更多相关文章

ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby - 在好的 Ruby 代码中没有注释是否被认为是可以接受的？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭5年前。Improvethisquestion我审查了一些用Ruby编写的专业代码，没有发现任何评论。代码读起来相当清晰，但没有self记录。我应该期望专业编写的Ruby代码有注释吗？或者，是否有一些Ruby原则认为注释不是必需的？
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby-on-rails - Ruby rand() 不能接受变量？ - 2
我对此有点困惑。我在RoR项目中的最终目标是从我的数据库中获取单个随机配置文件。我想它应该是这样的:@profile=Profile.find_by_user_id(rand(User.count))它一直抛出错误，因为user_id0不存在，所以我把它的一部分拿出来检查发生了什么:@r=rand(User.count)每次都返回0。发生什么了？我注册了5个假用户和5个相关配置文件来测试这个。如果我将Profile.find_by_user_id(rand(User.count))重写为Profile.find_by_user_id(3)它工作得很好。User.count也在工作。所以
Ruby gsub 方法 - 接受散列？ - 2
Ruby的gsub字符串方法应该接受散列。如此处所写:http://www.ruby-doc.org/core/classes/String.html#M001185“如果第二个参数是一个哈希，并且匹配的文本是它的键之一，则对应的值是替换字符串。”他们举了一个例子:'hello'.gsub(/[eo]/,'e'=>3,'o'=>'*')#=>"h3ll*"问题是，它对我不起作用(ruby1.8.7):in`gsub':can'tconvertHashintoString(TypeError)这发生在完全相同的行上。为什么？最佳答案
ruby - ruby 中的同一个程序如何接受来自用户的输入以及命令行参数 - 2
我的ruby脚本从命令行参数获取某些输入。它检查是否缺少任何命令行参数，然后提示用户输入。但是我无法使用gets从用户那里获得输入。示例代码:test.rbname=""ARGV.eachdo|a|ifa.include?('-n')name=aputs"Argument:#{a}"endendifname==""puts"entername:"name=getsputsnameend运行脚本:rubytest.rbraghav-k错误结果:test.rb:6:in`gets':Nosuchfileordirectory-raghav-k(Errno::ENOENT)fromtes
ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
ruby-on-rails - Rails - 理解 application.js 和 application.css - 2
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
ruby-on-rails - 使用 Rspec 测试 rake 任务不接受参数 - 2
根据thispostbyStephenHagemann，我正在尝试为我的一个rake任务编写Rspec测试.lib/tasks/retry.rake:namespace:retrydotask:message,[:message_id]=>[:environment]do|t,args|TextMessage.new.resend!(args[:message_id])endendspec/tasks/retry_spec.rb:require'rails_helper'require'rake'describe'retrynamespaceraketask'dodescribe're

javascript - Chart.js 2.0 中可接受的背景突出显示范围

有关javascript - Chart.js 2.0 中可接受的背景突出显示范围的更多相关文章

随机推荐