Chart.js（雷达图）每个scaleLine的scaleLineColor不同 [英] Chart.js (Radar Chart) different scaleLineColor for each scaleLine

问题描述

我想尝试使用Chart.js创建雷达图表，Chart.js为每个scaleLine提供各种颜色，或者在scaleLines之间着色。我想知道这是否可行？

来自：

收件人：

我目前有一个工作图，但似乎没有办法改变个别比例线。

种类问候
Leigh

解决方案

您可以扩展雷达图表类型来执行此操作，如此

  Chart.types.Radar.extend（{
 name：RadarAlt，
 initialize：function（data）{
 Chart.types.Radar.prototype.initialize.apply（this，arguments）; 
 
 var originalScaleDraw = this.scale.draw; 
 var ctx = thi s.chart.ctx; 
 this.scale.draw = function（）{
 var lineWidth = this.lineWidth; 
 //这会绕过originalScaleDraw中的线条图
 this.lineWidth = lineWidth; 
 
 originalScaleDraw.apply（this，arguments）; 
 
 ctx.lineWidth = this.lineWidth; 
 var scale = this; 
 //现在我们绘制
 Chart.helpers.each（scale.yLabels，函数（标签，索引）{
 //每个径向线的颜色 - 您可以通过数组查找替换它（如果你限制你的scaleSteps）
 ctx.strokeStyle =hsl（+ index / scale.yLabels.length * 360 +，80％，70％）; 
 
 // chart.js代码的副本
 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 
}）; 
 
 //如果您有动画，则需要这样做：false 
 // myRadarChart.update（）; 
  

---

小提琴 -

I would like to try and create a radar chart using Chart.js which has various colours for each scaleLine, or coloured between the scaleLines. I was wondering if this was possible?

From:

To:

I currently have a working graph, though there doesn't seem to be a method to change individual scale lines.

Kind Regards Leigh

解决方案

You can extend the radar chart type to do this, like so

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();
            });
        }
    }
});

and then call it like so

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

---

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

---

Of course, the sane thing would be to change the lightness value instead of the hue value :-)

这篇关于Chart.js（雷达图）每个scaleLine的scaleLineColor不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！