图表.js自定义图表

Chart.js custom charts

本文关键字：自定义 js 图表      更新时间：2023-09-26

描述所需结果的示例图

我正在尝试使用图表创建一个图表.js它类似于上面的图表......另外，如果任何其他图表库使这更容易，那么请大喊大叫！

图表需要具有：

  • 彩色区域突出显示早晨，下午和晚上，并为图标自定义背景图像。
  • 折线图，用于显示每小时进行的呼叫数
  • 底部的数字图例

我对如何通过扩展 Chart 在本地执行此操作略有茫然.js因此任何帮助都将不胜感激自定义图表示例或有关如何执行此操作的想法。

var rangesStart = scale.calculateX(0);
var rangesEnd = scale.calculateX(23);
var gradient = this.chart.ctx.createLinearGradient(0, rangesStart, 0, rangesEnd);
ranges.forEach(function (range) {
  gradient.addColorStop((scale.calculateX(range.start) - rangesStart) / (rangesEnd - rangesStart), range.color);
  gradient.addColorStop((scale.calculateX(range.end) - rangesStart) / (rangesEnd - rangesStart), range.color);
})

我确实在这里尝试过，但无法获得预期的结果，颜色似乎是水平而不是垂直的。

http://jsfiddle.net/shxnhdfd/

使用 beginPath（） 方法解决了问题

ctx.beginPath();
        ranges.forEach(function (range) {
          var numbersBetween = range.end - range.start
          ctx.fillStyle = range.color;
          ctx.fillRect(_this.datasets[0].points[range.start].x - 0 * unitX, yTop, unitX * numbersBetween, yHeight);
        })
        ctx.fill();

工作小提琴如下：

http://jsfiddle.net/cvwporru/2/

相关文章：