在Chart.js中更改折線圖上特定點的大小

Question

我想更改Chart.js中折線圖上特定點的大小。 我在此答案中看到了如何更改點的顏色，但找不到改變其大小的解決方案。 有任何想法嗎？

// dataArray and labelsArray are hard-coded arrays of int values.
var lineChartData = {
    datasets: [{
        data: dataArray,
        pointStrokeColor: "#fff",
        fillColor: "rgba(220,220,220,0.5)",
        pointColor: "rgba(220,220,220,1)",
        strokeColor: "rgba(220,220,220,1)"
    }],
    labels: labelsArray
};

// Changing color of point #5
myLineChart.datasets[0].points[4].fillColor =  "#FF0000";

// Changing point's size
// TODO:

Answer 1

遲到的答案。 但這對於正在搜索此內容的人會有所幫助。

在Chart.js的折線圖中設置不同點大小的代碼。

 var speedCanvas = document.getElementById("speedChart"); var pointRadius=[]; var dataFirst = { label: "Car A - Speed (mph)", data: [10, 59, 75, 25, 20, 65, 40], lineTension: 0.3, fill: false, borderColor: 'red', backgroundColor: 'transparent', pointBackgroundColor: 'green', pointBorderColor:'green', pointRadius: pointRadius }; var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [dataFirst] }; var chartOptions = { legend: { display: true, position: 'top', labels: { boxWidth: 80, fontColor: 'black' } } }; var lineChart = new Chart(speedCanvas, { type: 'line', data: speedData, options: chartOptions }); for(var i=0;i<this.lineChart.data.datasets[0].data.length;i++){ pointRadius.push(i); } lineChart.update(); 

下面的代碼是設置點的大小。

 for(var i=0;i<this.lineChart.data.datasets[0].data.length;i++){ pointRadius.push(i); } lineChart.update(); 

此方法在ChartJS的最新版本中有效

運行CodePen示例： CodePen示例

Answer 2

您可以按照Chart.js的文檔，簡單地增加折線圖中點的大小。 有自定義方法可用。

您可以嘗試以下方法：

var myLineChart = Chart.Line(ctx, {
    pointDot: false,
    pointLabelFontSize: 20
});

lineChartData = {
datasets: [{
    data: dataArray,
    pointStrokeColor: "#fff",
    fillColor: "rgba(220,220,220,0.5)",
    pointColor: "rgba(220,220,220,1)",
    strokeColor: "rgba(220,220,220,1)"
}],
labels: labelsArray
};

// Changing color of point #5
   myLineChart.datasets[0].points[4].fillColor =  "#FF0000";

pointLabelFontSize：20 //字體大小（以像素為單位）

Refreence1

線圖