chartjs-plugin-streaming + chartjs-插件-缩放
chartjs-plugin-streaming + chartjs-plugin-zoom
(对不起我的英语)
我使用 chartjs-plugin-streaming 作为实时 chartjs,我想使用 chartjs-plugin-zoom。
但是缩放不起作用。
当我测试缩放时,出现缩放区域但是当我将鼠标从图表上移开时,没有任何反应
我看到调用了chartjs-plugin-zoom
的方法doZoom
,我认为问题出在streaming plugin,但我不知道具体在哪里。
之前试过调用pause streaming来做zoom但是还是有同样的问题
我该怎么做才能使缩放正常工作?
谢谢
chartjs-plugin-streaming v1.6.0 现在支持 chartjs-plugin-zoom。
包括 Chart.js、chartjs-plugin-zoom.js、chartjs-plugin-streaming.js 和所需的库(Moment.js 和 Hammer.js),并添加pan
和 zoom
选项。请注意,与其他比例类型不同,rangeMin
和 rangeMax
选项不指定时间值。相反,pan.rangeMin
和 pan.rangeMax
限制了 delay
选项值的范围,而 zoom.rangeMin
和 zoom.rangeMax
限制了 duration
选项值的范围。
options: {
// Assume x axis is the realtime scale
pan: {
enabled: true, // Enable panning
mode: 'x', // Allow panning in the x direction
rangeMin: {
x: null // Min value of the delay option
},
rangeMax: {
x: null // Max value of the delay option
}
},
zoom: {
enabled: true, // Enable zooming
mode: 'x', // Allow zooming in the x direction
rangeMin: {
x: null // Min value of the duration option
},
rangeMax: {
x: null // Max value of the duration option
}
}
}
(对不起我的英语) 我使用 chartjs-plugin-streaming 作为实时 chartjs,我想使用 chartjs-plugin-zoom。
但是缩放不起作用。
当我测试缩放时,出现缩放区域但是当我将鼠标从图表上移开时,没有任何反应
我看到调用了chartjs-plugin-zoom
的方法doZoom
,我认为问题出在streaming plugin,但我不知道具体在哪里。
之前试过调用pause streaming来做zoom但是还是有同样的问题
我该怎么做才能使缩放正常工作?
谢谢
chartjs-plugin-streaming v1.6.0 现在支持 chartjs-plugin-zoom。
包括 Chart.js、chartjs-plugin-zoom.js、chartjs-plugin-streaming.js 和所需的库(Moment.js 和 Hammer.js),并添加pan
和 zoom
选项。请注意,与其他比例类型不同,rangeMin
和 rangeMax
选项不指定时间值。相反,pan.rangeMin
和 pan.rangeMax
限制了 delay
选项值的范围,而 zoom.rangeMin
和 zoom.rangeMax
限制了 duration
选项值的范围。
options: {
// Assume x axis is the realtime scale
pan: {
enabled: true, // Enable panning
mode: 'x', // Allow panning in the x direction
rangeMin: {
x: null // Min value of the delay option
},
rangeMax: {
x: null // Max value of the delay option
}
},
zoom: {
enabled: true, // Enable zooming
mode: 'x', // Allow zooming in the x direction
rangeMin: {
x: null // Min value of the duration option
},
rangeMax: {
x: null // Max value of the duration option
}
}
}