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

Posted 2023-05-07

【中文标题】从 Excel 导入数据并在 Chart.js 中使用

【英文标题】：Import data from Excel and use in Chart.js

【发布时间】：2017-09-10 23:32:58

【问题描述】：

好吧，我最近学习了如何使用标签画布渲染 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>

【问题讨论】：

我会使用 SheetJS 读取 .xlsx 文件并将数据转换为数据集。 github.com/SheetJS/js-xlsx 有很多示例如何加载和读取 .xlsx 文件。在 Javascript 数组中拥有所有数据行后，将它们转换为 chart.js 要求的正确格式并创建新图表。

【参考方案1】：

最简单的方法是使用chartjs-plugin-datasource，即利用SheetJS (js-xlsx)。

将以下 excel 文件另存为 mydata.xlsx 与您的 html 文件在同一目录中。

+--------------+-------+-------+-------+-------+-------+-------+
|              | 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>