Question

我发现了很多关于如何渐变填充图表下方区域的帖子，但我想这样做：

ChartJS可行吗？

Answer 1

这在某种程度上是可行的。下面给出的一个简单方法仅假设一个数据集（尽管如此，应该很容易扩展处理更多数据集的方法）。这个想法如下。我们将创建一个覆盖beforeUpdate方法的插件（在每次更新开始时调用）。在每次更新开始时，计算数据集的最小值和最大值的精确Y像素。然后使用createLinearGradient从画布的上下文创建垂直线性渐变，Y像素的红色对应于数据集的最小值，对应的Y像素为蓝色的jazzy类型到数据集的最大值。查看注释代码以获取更多信息。悬停在点和图例着色上可能存在一些故障，我不太热衷于研究。 A working fiddle is here并且代码也可以在下面找到。

＆＃13;

var gradientLinePlugin = {
  // Called at start of update.
  beforeUpdate: function(chartInstance) {
    if (chartInstance.options.linearGradientLine) {
      // The context, needed for the creation of the linear gradient.
      var ctx = chartInstance.chart.ctx;
      // The first (and, assuming, only) dataset.
      var dataset = chartInstance.data.datasets[0];
      // Calculate min and max values of the dataset.
      var minValue = Number.MAX_VALUE;
      var maxValue = Number.MIN_VALUE;
      for (var i = 0; i < dataset.data.length; ++i) {
        if (minValue > dataset.data[i])
          minValue = dataset.data[i];
        if (maxValue < dataset.data[i])
          maxValue = dataset.data[i];
      }
      // Calculate Y pixels for min and max values.
      var yAxis = chartInstance.scales['y-axis-0'];
      var minValueYPixel = yAxis.getPixelForValue(minValue);
      var maxValueYPixel = yAxis.getPixelForValue(maxValue);
      // Create the gradient.
      var gradient = ctx.createLinearGradient(0, minValueYPixel, 0, maxValueYPixel);
      // A kind of red for min.
      gradient.addColorStop(0, 'rgba(231, 18, 143, 1.0)');
      // A kind of blue for max.
      gradient.addColorStop(1, 'rgba(0, 173, 238, 1.0)');
      // Assign the gradient to the dataset's border color.
      dataset.borderColor = gradient;
      // Uncomment this for some effects, especially together with commenting the `fill: false` option below.
      // dataset.backgroundColor = gradient;
    }
  }
};

Chart.pluginService.register(gradientLinePlugin);

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["First", "Second", "Third", "Fourth", "Fifth"],
    datasets: [{
      label: 'My Sample Dataset',
      data: [20, 30, 50, 10, 40],
      // No curves.
      tension: 0,
      // No fill under the line.
      fill: false
    }],
  },
  options: {
    // Option for coloring the line with a gradient.
    linearGradientLine: true,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 100,
          stepSize: 20
        }
      }]
    }
  }
});

＆＃13;

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

＆＃13;

还有一个无插件的方法，提到here，但缺少这种方法。根据该方法，必须将borderColor设置为应该在创建图表之前创建的渐变。渐变是静态计算的，永远不会适合任意范围或按原样响应调整大小。

ChartJS的梯度折线图

1 个答案: