我一直在将chart.js与Chart附件chartjs-chart-timeline和chartjs-plugin-zoom结合使用。
但是我在使平移和缩放正常工作方面取得的成功有限。
我对其他图表类型（例如折线图）感到厌倦，并在其中获得了成功。
此图表类型是否可能不支持在图表上进行平移和缩放？
$(document).ready(function() {
var timeData = {
"labels": ["Cool Graph", "heater1"],
"datasets": [{
"data": [
[
"2018-01-22T16:00:00.000Z",
"2018-01-23T05:40:44.626Z",
"Unknown",
"Other Data"
]
]
},
{
"data": [
[
"2018-01-22T16:00:00.000Z",
"2018-01-22T20:00:00.000Z",
"On"
],
[
"2018-01-22T20:00:00.000Z",
"2018-01-23T04:57:55.437Z",
"Off"
],
[
"2018-01-23T04:57:55.437Z",
"2018-01-23T05:40:44.626Z",
"On"
]
]
}
]
}
var timeOptions = {
"elements": {
"colorFunction": function(text, data, dataset, index) {
if (text == "On") {
return Color('red');
}
return Color('green');
},
"showText": true,
"textPadding": 4,
},
pan: {
enabled: true,
mode: "x"
},
zoom: {
enabled: true,
drag: false,
mode: "x"
}
};
var ctx = document.getElementById("chartCanvas").getContext("2d");
new Chart(ctx, {
type: 'timeline',
data: timeData,
options: timeOptions
});
});<!DOCTYPE html>
<html>
<body>
<div>
<canvas id="chartCanvas"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.min.js"></script>
<script src="https://dl.dropbox.com/s/uh7idhv5szovjem/timeline.min.js"></script>
</body>
</html>提示：首先在chart.js和zoom插件之前包含锤子：