chartjs 在 x 轴上创建滚动

Question

我已经创建了图表，

但是我要怎么做才能有一个滚动条，并且值不会被压缩得那么紧，以便您可以阅读它，就像每个 x 值的间距就像一个中心米。

正如您在 jsfiddle 中看到的那样，它始终是容器的长度，而不是创建滚动条。

var ctx = document.getElementById('chartJSContainer').getContext("2d");

var data = {
  datasets: [
    {
      //label: "Scatter Dataset",
      data: [
        { x: 0, y: 0},
        { x: 1066, y: 10000 }
      ]
    },
    {
      //label: "Scatter Dataset 2",
      data: [
        { x: 0, y: 0},
        { x: 546, y: 15000 }
      ]
    },
     {
      //label: "Scatter Dataset 2",
      data: [
        { x: 0, y: 0},
        { x: 12546, y: 2800 }
      ],

    },
     {
      //label: "Scatter Dataset 2",
      data: [
        { x: 0, y: 0},
        { x: 112546, y: 2800 }
      ],

    }
  ]
};

var myLineChart = new Chart(ctx, {
  type: "line",
  data: data,

  options: {
  legend: {
        display: false
    },
        scales: {
            xAxes: [{
            ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                    console.log(index);
                        return  value /1000 + 'secs';
                    },
                    // beginAtZero: true,   // minimum value will be 0.,
                    stepSize: 500,// this is .5 secs
                    //   precision: 0.5 
                    autoSkip: false,

                },
                type: 'linear',
                position: 'bottom',

            }]
        }
    }
});

Answer 1

您可以在 div 元素中包含 canvas。

<div>
  <canvas id="chartJSContainer" height="10"></canvas>
</div>

并将以下定义添加到您的 CSS 文件中。

div {
  width: 10000px;
}

请看https://jsfiddle.net/f48evmyh/

chartjs 在 x 轴上创建滚动

chartjs create scrolling on the x axis

chart.js

chartjs-2.6.0