Chart.js（雷達圖）不同scaleLineColor爲每個scaleLine

Question

我想嘗試創建一個使用Chart.js的雷達圖表，每個scaleline有不同的顏色，或在scaleline之間着色。我想知道這是否可能？

來源：

要：

我現在有一個工作圖，雖然似乎沒有要改變個別刻度線的方法。

親切的問候 利

Answer 1

可以擴展雷達圖表類型要做到這一點，像這樣

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

     var originalScaleDraw = this.scale.draw; 
     var ctx = this.chart.ctx; 
     this.scale.draw = function() { 
      var lineWidth = this.lineWidth; 
      // this bypasses the line drawing in originalScaleDraw 
      this.lineWidth = lineWidth; 

      originalScaleDraw.apply(this, arguments); 

      ctx.lineWidth = this.lineWidth; 
      var scale = this; 
      // now we draw 
      Chart.helpers.each(scale.yLabels, function (label, index) { 
       // color of each radial line - you could replace this by an array lookup (if you limit your scaleSteps) 
       ctx.strokeStyle = "hsl(" + index/scale.yLabels.length * 360 + ", 80%, 70%)"; 

       // copy of the chart.js code 
       ctx.beginPath(); 
       for (var i = 0; i < scale.valuesCount; i++) { 
        pointPosition = scale.getPointPosition(i, scale.calculateCenterOffset(scale.min + (index * scale.stepValue))); 
        if (i === 0) { 
         ctx.moveTo(pointPosition.x, pointPosition.y); 
        } else { 
         ctx.lineTo(pointPosition.x, pointPosition.y); 
        } 
       } 
       ctx.closePath(); 
       ctx.stroke(); 
      }); 
     } 
    } 
}); 

，然後調用它像這樣

var ctx = document.getElementById("myChart").getContext("2d"); 
var myRadarChart = new Chart(ctx).RadarAlt(data, { 
    scaleLineWidth: 10 
}); 

// this is requried if you have animation: false 
// myRadarChart.update(); 

---

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

---

當然，理智的事情將是:-)