我的朋友让我做一个简单的应用程序,从Excel文件生成图表(柱状图,曲线)。因为我已经知道chart.js这个强大的库,所以我选择使用JavaScript。但是,在使用chart.js之前,我必须从Excel文件中获取数据。那么如何通过JavaScript读取Excel文件呢?
经过一些研究,我成功地在Internet Explorer中使用ActiveX来实现,但我需要它能跨浏览器工作。
我的朋友让我做一个简单的应用程序,从Excel文件生成图表(柱状图,曲线)。因为我已经知道chart.js这个强大的库,所以我选择使用JavaScript。但是,在使用chart.js之前,我必须从Excel文件中获取数据。那么如何通过JavaScript读取Excel文件呢?
经过一些研究,我成功地在Internet Explorer中使用ActiveX来实现,但我需要它能跨浏览器工作。
2). 创建一个新的Funfun或从Funfun在线编辑器中加载示例
3). 在任何其他JavaScript编辑器中一样编写JavaScript代码。在这一步中,为了直接使用电子表格中的数据,您需要编写一些JSON I/O以进行Excel单元格引用。此值所在的位置是Setting-short,但这只需要几行代码。例如,假设我们在电子表格中有以下数据。平均工时在单元格A1中。
Average hours Jan Feb Mar Apr
Baby Jones 93.5 81 94.5 95.5
Joanne Jones 91.5 90 88.5 85.5
{
"months": "=C6:G6",
"manager1": "=C7:G7",
"manager2": "=C8:G8"
}
您可以查看Funfun documentation">文档 获取更多解释。
4). 运行代码以绘制图表
这是我使用JavaScript (Chart.js) 和Excel数据在Funfun在线编辑器上制作的示例图表。 您可以通过以下链接查看它。 您还可以按照第二步中的说明轻松将其加载到Excel中。
https://www.funfun.io/1/edit/5a365e7c74efa7334ff272a6
声明:我是来自Funfun的开发人员。
有一个Chart.js插件chartjs-plugin-datasource,可以轻松地从Excel文件中加载数据。
假设您有一个如下所示的Excel文件,并将其保存为mydata.xlsx
,与您的HTML文件保存在同一目录中:
+---------------+---------+----------+-------+-------+------+------+------+
| | January | February | March | April | May | June | July |
+---------------+---------+----------+-------+-------+------+------+------+
| Temperature | 7 | 7 | 10 | 15 | 20 | 23 | 26 |
+---------------+---------+----------+-------+-------+------+------+------+
| Precipitation | 8.1 | 14.9 | 41.0 | 31.4 | 42.6 | 57.5 | 36.0 |
+---------------+---------+----------+-------+-------+------+------+------+
<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>
<canvas id="myChart"></canvas>
mydata.xlsx
。var ctx = document.getElementsById("myChart");
var chart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
type: 'line',
yAxisID: 'temperature',
backgroundColor: 'transparent',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
tension: 0,
fill: false
}, {
yAxisID: 'precipitation',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'transparent'
}]
},
plugins: [ChartDataSource],
options: {
scales: {
yAxes: [{
id: 'temperature',
gridLines: {
drawOnChartArea: false
}
}, {
id: 'precipitation',
position: 'right',
gridLines: {
drawOnChartArea: false
}
}]
},
plugins: {
datasource: {
url: 'mydata.xlsx'
}
}
}
});
我认为如果不使用ActiveX,你不能读取Excel文件。我不是说没有ActiveX就不能读取Excel文件,也许有其他方法,但我不知道那种方法。所以,如果你想使用ActiveX来读取文件,这里是你可以用于读取Excel文件的代码。
<input type="button" id="btnSubmit" onclick="readdata(1, 2)" value="Submit" />
<script>
var xVal = 1;
var yVal = 2
function readdata(x,y) {
x = xVal;
y = yVal;
try {
var excel = new ActiveXObject("Excel.Application");
excel.Visible = false;
var excel_file = excel.Workbooks.Open("D:\\Test.xls");// alert(excel_file.worksheets.count);
var excel_sheet = excel_file.Worksheets("Sheet1");
for(i=0;i<5;i++)
{
var data = excel_sheet.Cells(i,2).Value;
drawWithexcelValue(data);
}
}
catch (ex) {
alert(ex);
}
</script>
它只能在IE 9及以上版本中运行,并且您必须从设置中激活ActiveX功能。