平移 chart.js 也放大折线图
pan on chart.js also zoom on line charts
我想使用 chartjs-plugin-zoom 平移和缩放折线图。问题是当我使用平移时它也会放大图表直到只剩下一个标签,当图表模型是条形图时没有问题。我怎么解决这个问题?我只想平移而不是缩放。
这是适用于条形图但不适用于折线图的 fiddle:
https://jsfiddle.net/pfd2on55/
var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 5, 9, 4, 11]
}]
},
options: {
pan: {
enabled: true,
mode: 'x',
},
zoom: {
enabled: true,
mode: 'x',
}
}
});
我通过编辑文件 Chart.Zoom.js 的函数 panIndexScale 解决了这个问题。我变了
var offsetAmt = Math.max((scale.ticks.length - ((scale.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
至
var offsetAmt = Math.max((scale.ticks.length - 0), 1);
现在可以正常平移和缩放了。
我想使用 chartjs-plugin-zoom 平移和缩放折线图。问题是当我使用平移时它也会放大图表直到只剩下一个标签,当图表模型是条形图时没有问题。我怎么解决这个问题?我只想平移而不是缩放。 这是适用于条形图但不适用于折线图的 fiddle: https://jsfiddle.net/pfd2on55/
var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 5, 9, 4, 11]
}]
},
options: {
pan: {
enabled: true,
mode: 'x',
},
zoom: {
enabled: true,
mode: 'x',
}
}
});
我通过编辑文件 Chart.Zoom.js 的函数 panIndexScale 解决了这个问题。我变了
var offsetAmt = Math.max((scale.ticks.length - ((scale.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
至
var offsetAmt = Math.max((scale.ticks.length - 0), 1);
现在可以正常平移和缩放了。