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

Question

我正在使用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'},           
    }});

Answer 1

以下实现了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>

Answer 2

您可以使用来自 chartjs-plugin-annotation（来自 chartjs 的官方）的Box Annotations。指定yMin& yMax，并保留xMin&xMax未定义，以便它填充整个 x 轴。

示例代码：

var chartData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    type: "line",
    label: "Dataset 1",
    data: [10,-20,40,45,15,5,20,20],
    fill: false
  }]
};

var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
  type: "bar",
  data: chartData,
  options: {
    annotation: {
      annotations: [{
        drawTime: "beforeDatasetsDraw",
        type: "box",
        xScaleID: "x-axis-0",
        yScaleID: "y-axis-0",
        borderWidth: 0,
        yMin: 25,
        yMax: 40,
        backgroundColor: "rgba(46, 204, 113,0.3)"
      }]
    }
  }
});

<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>

Answer 3

这段代码会有帮助

var bgdata = {

        datasets: [
        {
        label: "Average Hourly Blood Glucose Reading", 
        fill: false,

       data: [
            {
                "y": 213,
                "x": 0,
                "backgroundColor": "rgba(29, 9, 158,0.2)",
            "label":"12:00 AM"

            },
            {
                "y": 199,
                "x": 1,
                "backgroundColor": "rgba(29, 9, 158,0.4)",
            "label":"1:00 AM"

            },
        {
                "y": 208,
                "x": 2,
                "backgroundColor": "rgba(29, 9, 158,0.6)",
            "label":"2:00 AM"

            }
        ]
            }
        ]
     };