Chartjs - pointColor, чтобы следить за текущим цветом градиентного штриха

Question

Я только что создал линейную диаграмму, используя библиотеку chartjs, и мне удалось сделать штрих в градиентном цвете. Здесь просто fiddle пример того, что я сделал до сих пор.

Что мне нужно, это сделать pointColor следовать градиенту stroke и подобрать текущий цвет его положения. Как на этом photo.

Любые идеи, как достичь этого?

Спасибо!

Answer 1

Обновление

От @AndyHolmes вопроса на 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(); 
    } 
}); 

pointColor и pointStrokeColor в lineChartData фактически не требуется. Обратите внимание, что вы также можете переопределить pointHighlightStroke и pointHighlightFill, если хотите.

Вы называете это как так

new Chart(ctx).LineAlt(... 

---

Fiddle - http://jsfiddle.net/w2nh153d/

---