javascript - 在 Chart.js 中更改折线图上特定点的大小

Question

我想在 Chart.js 中更改折线图上特定点的大小。我在 this answer 看到了如何更改点的颜色但我找不到更改其大小的解决方案。有什么想法吗？

// 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 Example