chartjs在x轴上创建滚动

Question

我已经创建了图表，

但是我将如何做到这一点，以便有一个滚动条，并且不会紧紧压缩这些值，这样您就可以阅读它，就像每个x值的间距就像一个中心计。

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

https://jsfiddle.net/a5co4nqk/

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

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