Chart.js 数据点的颜色变化

Question

我想让点变成纯色而不是线条颜色的边框。如何去除数据点的边框颜色并使其成为纯色？

当前输出：

我想要的：

Answer 1

您可以为数组中的每个数据点设置颜色值。

data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
            ],
            borderWidth: 1
        }]

codepen - https://codepen.io/non_tech_guy/pen/VwzwRrL

我能看到的唯一问题是第一个 borderColor 值控制线条的颜色，但它更近了一步。

Answer 2

您可以将 point 和 point border 设置为相同的颜色。

datasets: [
    {
      label: 'Dataset 1',
      data: Utils.numbers(NUMBER_CFG),
      fill: false,
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: '#1F363D', # Here
      borderWidth: 1,
      pointRadius: 5,
      pointBorderColor: '#1F363D' #Here
    },

Chart.js 数据点的颜色变化

Chart.js color change of the data points

html

javascript

css

graph

chart.js