Javascript 如何实现';autoskip';chartjs中的功能?
Javascript 如何实现';autoskip';chartjs中的功能?,javascript,reactjs,chart.js,Javascript,Reactjs,Chart.js,我正在尝试使用chart.js文档中的autoSkip功能: 我遇到的问题是我的x轴标签重叠(参见上面的示例)。 我读过的所有文章都说,这个自动跳转功能应该自动跳过重叠的标签。然而,当设置为true或false时,我的图表中似乎没有任何变化 <Line data={this.state.chartData} options={{ elements: { point: { radius: 2 }
我正在尝试使用chart.js文档中的autoSkip功能: 我遇到的问题是我的x轴标签重叠(参见上面的示例)。 我读过的所有文章都说,这个自动跳转功能应该自动跳过重叠的标签。然而,当设置为true或false时,我的图表中似乎没有任何变化
<Line
data={this.state.chartData}
options={{
elements: {
point: {
radius: 2
}
},
tooltips: {
mode: 'nearest',
intersect: false
},
scales: {
yAxes: [{
ticks: {
stepSize: 1, //sets the interval that our y axis counts by
beginAtZero: false, //starts our graph at 0 if true
},
gridLines: {
drawOnChartArea: false
}
}],
xAxes: [{
ticks: {
minRotation: 88,
autoskip: true,
autoSkipPadding: 50
},
gridLines: {
drawOnChartArea: false
},
type: 'time',
distribution: 'series',
time: {
unit: 'day',
displayFormats: {
day: 'MMM D',
},
tooltipFormat: 'MMM D h:mm a',
},
},
]
},
responsive: true, //lets us resize our chart
maintainAspectRatio: true, //lets us resize our chart
}
}
/>
我注意到您的autoskip是小写的,在camlcase(即autoskip)中的文档中-根据我使用Chartjs的经验,我发现尝试并修复它可能会有所不同,看看这是否会起作用您可以尝试更改
distribution: series
到
在我看来,它似乎是在试图均匀地分配数据,尽管事实上你丢失了3天的数据(可能是周末?)。它真的不应该打破你的标签。。。但我敢打赌,标签知道图形上有足够的空间容纳n个标签,但他们没有意识到其中三个标签被挤在一起
默认分布是线性的,因此您也可以删除它。()对于任何想知道的人,chartjs开发人员已经回复了我的帖子:
当前的Chart.js版本中似乎存在一些问题。应该在2.9中修复。如果有人想知道,请更新到2.9。确认问题已在那里得到解决
感谢您的回复,我刚刚将其改回“autoSkip”,看起来我也得到了同样的结果。嗨,克里斯,感谢您的回复。因为这是一个股票市场应用程序,而且证券交易所周末不运行,所以我选择了一个系列发行版。在这种情况下,线性化会在周末的空数据图中造成很大的差距。我仍然会对此进行测试,看看这是否是导致问题的原因。。。毕竟,在你知道什么会破坏图表之前,你无法真正决定一个合适的解决方法。如果发行版是导致问题的原因,那么用ChartsJS创建一个问题是值得的。一个很好的解决方法是创建一个自定义的ticks函数并隐藏您不想要的函数。但是,在解决技术问题之前,这种变通方法并不是很有用。感谢您的回复,我已经在github上创建了一张票据,以获得进一步的帮助。如果在这方面得到解决,我将在这里发布解决方案。
distribution: linear