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

I want to change the size of a specific point on a line chart in Chart.js. I saw in this answer how to change the color of a point but I can't find a solution for changing its size. Any ideas?

我想在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:

1 个解决方案

#1

You can Simply increase the size of dot in line chart follow the Documentation of Chart.js. There is customizing method is available.

您可以按照Chart.js的文档简单地增加折线图中点的大小。有定制方法可用。

You can try this:

你可以试试这个:

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 // Font Size in pixel

pointLabelFontSize:20 //字体大小(以像素为单位)

Refrence1

Linechart

#1