嗯,我最近学会了如何用标签画布渲染html图形。但是手动填写数据有点麻烦...我想知道是否可以只使用JavaScript直接从Excel电子表格中获取这些数据。这是我目前为止的代码...
<div>
<canvas class="line-chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
var ctx = document.getElementsByClassName("line-chart");
var dia = ["Dia 1", "Dia 2", "Dia 3", "Dia 4", "Dia 5", "Dia 6"]; //Seta os dias
var real = [60,30,65,59,58,49]; //Seta os dados do grafico 1
var meta = [30,45,62,47,55,11]; //Seta os dados do grafico 2
//Type, data, options
var chartGraph = new Chart (ctx, {
type: 'line', //line, bar, radar, doughnut (pizza), polarArea
data: {
labels: dia,
datasets: [{
label: "OEE Real (%) ",
data: real,
borderWidth: 6,
borderColor: 'rgba(146,242,42,0.85)',
background: 'transparent',
},
{
label: "OEE Meta (%)",
data: meta,
borderWidth: 6,
borderColor: 'rgba(207,0,15,0.85)',
background: 'transparent',
},
]},
options: {
title: {
display: true,
fontSize: 20,
text: "ENCARTUCHAMENTO 05"
},
scales: {
yAxes: [{
ticks: {
max: 100,
min: 0,
}
}]
},
}
});
</script>
</div>
1条答案
按热度按时间3pmvbmvn1#
最简单的方法是使用chartjs-plugin-datasource,它利用了SheetJS (js-xlsx)。
将下面的excel文件保存为
mydata.xlsx
,保存在html文件所在的目录中。然后,在脚本中指定它。