问题描述
我使用 Chart.js 2 (React-chart-js 2) 来显示折线图。
解决方法
您可以为此使用可编写脚本的选项，请参阅隐藏每隔一个标签的示例，如果需要，您可以调整它以隐藏更大的步骤。
示例：
var options = {
type: 'line',data: {
labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
label: '# of Votes',data: [12,19,3,5,2,3],borderWidth: 1
},{
label: '# of Points',data: [7,11,8,7],borderWidth: 1
}
]
},options: {
scales: {
x: {
ticks: {
callback: function(val,index) {
return index % 2 === 0 ? this.getLabelForValue(val) : '';
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0/chart.js"></script>
</body>您可以尝试使用以下配置
var config = {
type: 'line',showDatapoints: true,legend: { position: 'top' },data: data,options: {
responsive: true,hoverMode: 'index',stacked: false,title: {
display: true,text: 'Chart Title'
},scales: {
yAxes: [{
type: 'linear',// only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,position: 'left',id: 'y-axis-1',},{
type: 'linear',position: 'right',id: 'y-axis-2',// grid line settings
gridLines: {
drawOnChartArea: true,// only want the grid lines for one axis to show up
},}],}
}
};