时间戳

首页 > 解决方案 > Chart.js标签之间的多个数据

javascript - 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,150,10,220,150,220,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,
                            scaleLabel: {
                                display: true,
                                labelString: 'Total Cumulé (Euros)'
                            }
                        }]
                    }
                }
            };

le rendu est le suvant :

在此处输入图像描述

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

太感谢了 ！:)

标签： javascriptchart.jschart.js2

解决方案

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

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

然后您必须定义ticks.stepSizex 轴的期望值。

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

可选地，您也可以定义ticks.maxTicksLimit。

请查看您修改后的代码，看看它是如何工作的。

var data = [20, 60, 80, 90, 120, 150, 170, 210, 260, 220, 150, 10, 220, 150, 220, 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">

推荐阅读