从Excel导入数据并在Chart.js中使用

本文介绍了从Excel导入数据并在Chart.js中使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 好吧，最近我学会了如何使用标签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 diasvar real = [60,30,65,59,58,49]; //Seta os dados do grafico 1var meta = [30,45,62,47,55,11]; //Seta os dados do grafico 2//Type, data, optionsvar chartGraph = new Chart (ctx, {type: 'line', //line, bar, radar, doughnut (pizza), polarAreadata: {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 ，它利用了 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/[email protected]"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><div> <canvas class="line-chart"></canvas></div><script>var ctx = document.getElementsByClassName("line-chart");//Type, data, optionsvar 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中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！