Question

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

自：

要：

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

亲切的问候 Leigh

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/

当然，理智的是改变亮度值而不是色调值： - ）

Chart.js（雷达图）每个scaleLine

1 个答案: