javascript - Chart.js 自定义图表

Question

Example graph depicting the desired outcome

我正在尝试使用 Chart.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/

Answer 1

使用 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();

下面的工作 fiddle :

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