如何解决拒绝加载的折线图,图表js和图表js-plugin-crosshair
经过几个小时的代码摆弄,我不知道自己在做什么错。 (这是我使用html / javascript进行编码的前几天)。
任何人都知道发生了什么问题?我正在尝试使用一些额外的选项(包括插件)制作纯线图。
谢谢。
代码如下:
<html lang="en">
</html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@1.1.6/dist/chartjs-plugin-crosshair.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.js"></script>
</head>
<body onLoad="ready()"></body>
<canvas id="myChart" width="400" height="150"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx,{
type: 'line',data: {
labels: [1,2,3],datasets: [{
label: "Centre of Mass Mouvement",data: [1,backgroundColor: ['rgba(20,35,255,0.2)'],borderColor: ['rgba(20,1)']
}]
},options: {
title: {
display: true,text: 'Mouvement in the vertical'
},scale: {
xAxes: [{
display: true,scaleLabel: {
display: true,labelString: 'Time'
}
}],yAxes: [{
display: true,labelString: 'Y value'
}
}]
},tooltips: {
mode: 'interpolate',intersect: false
},plugins: {
crosshair: {
line: {
color: '#F66',width: 1,dashPattern: [5,5]
},sync: {
enabled: true,group: 1,suppressTooltips: false
},zoom: {
enabled: true,zoomboxBackgroundColor: 'rgba(66,133,244,0.2)',zoomboxBorderColor: '#48F',zoomButtonText: 'Reset Zoom',zoomButtonClass: 'reset-zoom'
}
}
}
}
};
window.onmessage = function(event){
if (event.data && Array.isArray(event.data)) {
myChart.data.labels = event.data[0];
myChart.data.datasets.data = event.data[1];
myChart.update();
}
else {
console.log("HTML Code Element received a generic message:");
console.log(event.data);
}
};
function handleClick(e){
var activeBars = myChart.getElementAtEvent(e);
var value = myChart.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
var label = activeBars[0]._model.label;
window.parent.postMessage({
"type":"click","label":label,"value":value
},"*");
}
function ready(){
window.parent.postMessage({"type":"ready"},"*");
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。