Chart.js标签之间的多个数据

问题描述

我正在使用chart.js来显示数据。我想为每个标签显示几个点。

图片胜于句子，这是一个扑克平台的例子：

我们看到在标签之间记录了几个点。

这是我目前带有测试数据的带有chart.js的代码：

var config = {
                type: 'line',data: {
                    labels: ['2','4','6','8','10','12','14','16'],datasets: [{
                        label: 'Bankroll',backgroundColor: window.chartColors.grey,borderColor: window.chartColors.grey,data: [20,60,80,90,120,150,170,210,260,220,10,150],fill: false,}]
                },options: {
                    responsive: true,title: {
                        display: true,text: 'Statistiques de votre bankroll'
                    },tooltips: {
                        mode: 'index',intersect: false,},hover: {
                        mode: 'nearest',intersect: true
                    },animation: {
                        duration: 2000
                    },scales: {
                        xAxes: [{
                            display: true,scaleLabel: {
                                display: true,labelString: 'Nombre de tournois'
                            }
                        }],yAxes: [{
                            display: true,labelString: 'Total Cumulé (Euros)'
                            }
                        }]
                    }
                }
            };

人间专家：

我们观察到我没有8个数据，但只显示16个。我想通过显示所有点来保持相同数量的标签，这可能吗？

非常感谢！ ：）

解决方法

您可以使用Array.map()从数据中扣除data.labels。

labels: data.map((v,i) => i + 1)

然后，您必须为x轴定义所需的ticks.stepSize。

xAxes: [{
  ticks: {
    stepSize: 2
  },

（可选）您也可以定义ticks.maxTicksLimit。

请查看修改后的代码，并查看其工作原理。

var data = [20,60,80,90,120,150,170,210,260,220,10,150];

var config = {
  type: 'line',data: {
    labels: data.map((v,i) => i + 1),datasets: [{
      label: 'Bankroll',backgroundColor: 'grey',borderColor: 'grey',data: data,fill: false,}]
  },options: {
    responsive: true,title: {
      display: true,text: 'Statistiques de votre bankroll'
    },tooltips: {
      mode: 'index',intersect: false,},hover: {
      mode: 'nearest',intersect: true
    },animation: {
      duration: 2000
    },scales: {
      xAxes: [{
        ticks: {
          stepSize: 2
        },scaleLabel: {
          display: true,labelString: 'Nombre de tournois'
        }
      }],yAxes: [{
        scaleLabel: {
          display: true,labelString: 'Total Cumulé (Euros)'
        }
      }]
    }
  }
};

new Chart('canvas',config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas">