Chartjs - pointColor 跟随渐变描边的当前颜色

我刚刚使用创建折线图chartjs http://www.chartjs.org/图书馆和我设法用渐变颜色进行描边。这里很简单fiddle http://jsfiddle.net/jvmk5o6a/例如我到目前为止所做的事情。

接下来我需要做的是pointColor遵循梯度stroke并获取其位置的当前颜色。就像这个photo https://d13yacurqjgara.cloudfront.net/users/309045/screenshots/1659000/04-sparkline_1x.jpg.

有什么想法如何实现这一目标吗？

Thanks!

Update

来自 @AndyHolmes 的问题是否可以向 Chart.js 折线图添加阴影？ https://stackoverflow.com/questions/33104231/is-it-possible-to-add-a-drop-shadow-to-chart-js-line-chart

不需要原始解决方案（扩展）。所需要的只是

  ...
  pointColor: gradientstroke
  ...

原创解决方案

只需延长线并更新点颜色即可。您可以在绘制函数中执行此操作，但在初始化函数中执行此操作会更有效（当启用动画时）

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var ctx = this.chart.ctx;
        // draw a line with the gradient, we use this to get each points color
        ctx.fillStyle = data.datasets[0].strokeColor;
        ctx.fillRect(0, 0, this.chart.width, 1);

        this.datasets.forEach(function (dataset) {
            dataset.points.forEach(function (point) {
                // get the color from the gradient drew above
                var imageData = ctx.getImageData(point.x, 0, 1, 1);
                var color = 'rgba(' + imageData.data[0] + ', ' + imageData.data[1] + ', ' + imageData.data[2] + ', ' + imageData.data[3] + ')';

                // the _saved is used by the tooltip refresh to draw the point when you mouseout
                point.fillColor = color;
                point._saved.fillColor = color;
                point.strokeColor = color;
                point._saved.strokeColor = color;
            })
        })

        // we need to call the render function again to overwrite what was drawn in the initialize render (otherwise we don't see the changed color when animation is false)
        // this also wipes out the reference gradient
        this.render();
    }
});

lineChartData 中的 pointColor 和 pointStrokeColor 实际上不是必需的。请注意，如果您愿意，您还可以以相同的方式覆盖 pointHighlightStroke 和 pointHighlightFill。

你这样称呼它

new Chart(ctx).LineAlt(...

小提琴 -http://jsfiddle.net/w2nh153d/ http://jsfiddle.net/w2nh153d/