如何使用chart.js更改图形中的点颜色

Question

想要更改图形点点颜色

这是我的js代码

我使用chart.js创建了一个图表，但现在我想在图表中显示不同的点颜色，以便用户可以了解哪个值超过平均值，哪个值不是。  我怎么能实现我发送给你的代码

    var label           = [];

    var dataset_data    = [];
    $scope.number       = details.number;
    var total_picked    = 0;
    angular.forEach(details.picked_details,function(value,key)
    {
        label.push("Pair with "+value.paired_with);
        dataset_data.push(value.no_of_times);
        total_picked+=value.no_of_times;
    })
    var data = {
        labels: label,
        datasets: [{
            data: dataset_data
        }]
    };
    var ctx = document.getElementById("LineWithLine").getContext("2d");
    Chart.types.Line.extend({
        name: "LineWithLine",
        draw: function () {
            Chart.types.Line.prototype.draw.apply(this, arguments);
            var lines = this.options.limitLines;
            for (var i = lines.length; --i >= 0;) {
                var xStart = Math.round(this.scale.xScalePaddingLeft);
                var linePositionY = this.scale.calculateY(lines[i].value);
                //this.chart.ctx.fillStyle = lines[i].color ? lines[i].color : this.scale.textColor;
                this.chart.ctx.fillStyle = "green";
                this.chart.ctx.font = this.scale.font;
                this.chart.ctx.textAlign = "left";
                this.chart.ctx.textBaseline = "top";
                if (this.scale.showLabels && lines[i].label) {
                    this.chart.ctx.fillText(lines[i].label, xStart + 20, linePositionY);
                }
                this.chart.ctx.lineWidth = this.scale.gridLineWidth;
                this.chart.ctx.strokeStyle = lines[i].color ? lines[i].color : this.scale.gridLineColor;
                //this.chart.ctx.strokeStyle = "green";
                if (this.scale.showHorizontalLines) {
                    this.chart.ctx.beginPath();**strong text**
                    this.chart.ctx.moveTo(xStart, linePositionY);
                    this.chart.ctx.lineTo(this.scale.width, linePositionY);
                    this.chart.ctx.stroke();
                    this.chart.ctx.closePath();
                }
                this.chart.ctx.lineWidth = this.lineWidth;
                this.chart.ctx.strokeStyle = this.lineColor;
                //this.chart.ctx.strokeStyle = "yellow";
                this.chart.ctx.beginPath();
                this.chart.ctx.moveTo(xStart - 5, linePositionY);
                this.chart.ctx.lineTo(xStart, linePositionY);
                this.chart.ctx.stroke();
                this.chart.ctx.closePath();
            }
        }
    });
    new Chart(ctx).LineWithLine(data, {
        datasetFill : false,
        limitLines: [
            {
                value: parseInt(total_picked/47),
                label: "Average Pair of "+details.number+" With Other is "+parseInt(total_picked/47),
                color: '#FF0000'
            }
        ],
    });

Answer 1

请参阅此问题。基本上，您可以为pointBackgroundColor创建颜色数组。

https://github.com/wallabyway/markupExt/blob/6c55e73226a70a61f33bc7f8f021b44a979c32e2/docs/app.js#L14