是否可以让 Chart JS 3.7.0 的折线图中的点看起来像一个甜甜圈？

Question

Chart JS版本为3.7.0

我正在寻找一种方法让我的图表点看起来像这样：

像这样：

我发现这个库中有一个选项，您可以在其中将点设置为特定形状。 e.x: pointStyle: 'rectRot' 将使点的外观如下所示:

是否有实现我所寻找的选项或方法？（检查第二张图片）。

提前致谢！

我的图表 javascript:

const data = {
  datasets: [
    {
      backgroundColor: 'black',
      borderColor: '#2d84b4',
      borderWidth: 2,
      data: [
        { x: 'Dec 27', y: 0.204 },
        { x: '01:00', y: 0.234 },
        { x: '02:00', y: 0.274 },
        { x: '03:00', y: 0.234 },
        { x: '04:00', y: 0.304 },
        { x: 'Dec 28', y: 0.506 },
      ],
      fill: false,
      pointBorderColor: 'rgba(0, 0, 0, 0)',
      pointBackgroundColor: 'rgba(0, 0, 0, 0)',
      pointHoverBackgroundColor: '#2d84b4',
      pointHoverBorderColor: '#2d84b4',
    },
  ],
};

const config = {
  type: 'line',
  data: data,
  options: {
    animation: {
      duration: 0,
    },
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      //Do not display legend.
      legend: {
        display: false,
      },
    },
    scales: {
      xAxes: {
        stacked: true,
        ticks: {
          stepSize: 2,
        },
        grid: {
          display: true,
          drawBorder: false,
          drawOnChartArea: false,
          drawTicks: true,
          tickLength: 4,
          type: 'time',
        },
      },
      yAxes: {
        grid: {
          drawBorder: false,
          drawTicks: false,
        },
      },
    },
    elements: {
      point: {
        radius: 5,
      },
    },
  },
};

// Initialize the Chart.
const myChart = new Chart(document.getElementById('myChart'), config);
window.addEventListener('beforeprint', () => {
  myChart.resize(600, 600);
});
window.addEventListener('afterprint', () => {
  myChart.resize();
});

//Disable all animations!
myChart.options.animation = false;
myChart.options.animations.colors = false;
myChart.options.animations.x = false;
myChart.options.transitions.active.animation.duration = 0;

Answer 1

这些点似乎在你的透明背景下工作得很好，只有在悬停时你再次设置了正常背景，所以 pointHoverBackgroundColor 也应该是透明的。

要使鼠标悬停时点更大，您可以使用 hoverRadius 并使线条具有相同的宽度，您可以使用 pointHoverBorderWidth:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'black',
      borderColor: '#2d84b4',
      borderWidth: 2,
      pointBackgroundColor: 'rgba(0, 0, 0, 0)',
      pointHoverBackgroundColor: 'rgba(0, 0, 0, 0)',
      pointHoverBorderColor: '#2d84b4',
      hoverRadius: 10,
      pointHoverBorderWidth: 2
    }]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

是否可以让 Chart JS 3.7.0 的折线图中的点看起来像一个甜甜圈？

Is it possible to make points in a line chart of Chart JS 3.7.0 look like a donut?

javascript

chart.js