如何仅显示工具提示以在反应图表中显示 x 值

编程问答 2022-04-21

问题描述

我有一个折线图，其中我只显示四个值，但我的数据集更大，并且可以为所有数据集显示在线点。有没有办法只为显示的 x 值显示圆形指针？

enter image description here

解决方法

您可以为此使用可编写脚本的选项：

var options = {
  type: 'line',data: {
    labels: ["Red","Blue","Yellow","Green","Purple","Orange","Red","Orange"],datasets: [{
      label: '# of Votes',data: [12,19,3,5,2,12,3],backgroundColor: 'red',borderColor: 'red',radius: (ctx) => {
        let radius = 0;
        ctx.chart.scales.x.ticks.forEach((tick) => {
          if (tick.value === ctx.dataIndex) {
            radius = 5;
          }
        })
        return radius;
      }
    }]
  },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.4.1/chart.js"></script>
</body>

代码笔：https://codepen.io/leelenaleee/pen/JjNGVpY

react-chartjsreactjsreactjsreactjsreactjs