从Excel导入数据并在Chart.js中使用 [英] Import data from Excel and use in Chart.js
问题描述
好吧,最近我学会了如何使用标签canvas渲染html图形。但是手动填写数据有些麻烦……我想知道是否有可能仅使用JavaScript从Excel电子表格中直接获取这些数据。
这是我到目前为止的代码...
Well, I've learned how to render html graphics with the tag canvas recently. But filling in the data manually is a little painful ... I wanted to know if it is possible to get this data straight from an Excel spreadsheet using just JavaScript. This is my code so far ...
<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>
推荐答案
最简单的方法是使用 chartjs-plugin-datasource ,它利用了< a href = https://github.com/sheetjs/js-xlsx rel = nofollow noreferrer> SheetJS(js-xlsx)。
The easiest way is to use chartjs-plugin-datasource, which is leveraging SheetJS (js-xlsx).
将以下excel文件另存为与HTML文件相同的目录中的 mydata.xlsx
。
Save the following excel file as mydata.xlsx
in the same directory as your html file.
+--------------+-------+-------+-------+-------+-------+-------+
| | Dia 1 | Dia 2 | Dia 3 | Dia 4 | Dia 5 | Dia 6 |
+--------------+-------+-------+-------+-------+-------+-------+
| OEE Real (%) | 60 | 30 | 65 | 59 | 58 | 49 |
+--------------+-------+-------+-------+-------+-------+-------+
| OEE Meta (%) | 30 | 45 | 62 | 47 | 55 | 11 |
+--------------+-------+-------+-------+-------+-------+-------+
然后,指定
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
<div>
<canvas class="line-chart"></canvas>
</div>
<script>
var ctx = document.getElementsByClassName("line-chart");
//Type, data, options
var chartGraph = new Chart (ctx, {
type: 'line',
data: {
datasets: [{
borderWidth: 6,
borderColor: 'rgba(146, 242, 42, 0.85)',
fill: false
}, {
borderWidth: 6,
borderColor: 'rgba(207, 0, 15, 0.85)',
fill: false
}
]},
plugins: [ChartDataSource],
options: {
title: {
display: true,
fontSize: 20,
text: 'ENCARTUCHAMENTO 05'
},
scales: {
yAxes: [{
ticks: {
max: 100,
min: 0,
}
}]
},
plugins: {
datasource: {
url: 'mydata.xlsx'
}
}
}
});
</script>
这篇关于从Excel导入数据并在Chart.js中使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!