ChartJS 动态标签答案

【问题标题】：ChartJS dynamic labelChartJS 动态标签
【发布时间】：2021-04-16 19:04:01
【问题描述】：

我正在尝试根据从数据库返回的点数为折线图动态添加标签。我有一个表格，一旦用户单击特定行，就会更新图表。点数可以变化。即图表 1 有 2 个点，图表 2 有 5 个点。我需要计算点数并按顺序显示底部标签。即图表 1 的 0、1 和图表 2 的 0、1、2、3、4。下图显示了我想要避免发生的事情。 2、3 和 4 不应显示在图表 1 中，而应显示在图表 2 中。

我已经为这个例子 [0, 1, 2, 3, 4] 硬编码了标签数据。 xAxisValue.length 带回每个图表显示的点数。感谢任何帮助。

data={{
              labels: [0, 1, 2, 3, 4],
              datasets: [
                {
                  label: 'Training',
                  data: yAxisValue,
                  fill: false,
                  borderColor: 'rgb(0, 119, 182)',
                  backgroundColor: 'rgb(0, 119, 182)',
                  lineTension: 0,
                },
                {
                  label: 'Validation',
                  data: xAxisValue,
                  fill: false,
                  borderColor: 'rgb(0, 180, 216)',
                  backgroundColor: 'rgb(0, 180, 216)',
                  lineTension: 0,
                },
              ],
            }}

【问题讨论】：

标签： javascript reactjs charts chart.js react-chartjs

【解决方案1】：

您可以定义一个xAxes.ticks.callback 函数。当存在对应的data 值时，它应该返回label，否则返回null。

xAxes: [{
  ticks: {
    callback: (v, i) => i + 1 <= trainingData.length ? v : null 
  }
}]

请看下面的可运行代码，看看它是如何工作的。

const trainingData =  [0.68, 0.9];
const validationData = [0.57, 0.97];

new Chart('line-chart', {
  type: 'line',
  data: {
    labels: [0, 1, 2, 3, 4],
    datasets: [{
        label: 'Training',
        data: trainingData,
        fill: false,
        borderColor: 'rgb(0, 119, 182)',
        backgroundColor: 'rgb(0, 119, 182)',
        lineTension: 0,
      },
      {
        label: 'Validation',
        data: validationData,
        fill: false,
        borderColor: 'rgb(0, 180, 216)',
        backgroundColor: 'rgb(0, 180, 216)',
        lineTension: 0,
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 1          
        }
      }],
      xAxes: [{
        ticks: {
          callback: (v, i) => i + 1 <= trainingData.length ? v : null 
        }
      }]      
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="line-chart" height="90"></canvas>

【讨论】：