图表JS 在 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元素中。

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

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

div {
width: 10000px;
}

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