通过使用javascript从excel文件中读取excel数据来绘制折线图

Question

Here is my excel file as follows== 这是我的Excel文件如下==

Data 数据

20.248602 18.54032 18.254036 15.217833 13.194518 17.521723 17.78833 24.018597 18.401508 24.46464 20.752457 22.570473 17.870035 22.474863 20.783422 24.075064 17.72947 20.202723 16.776543 19.087515 7.232176 8.508578 7.5457883 10.0660925 13.344348 5.5784864 5.3469315 17.087952 20.248602 18.54032 18.254036 15.217833 13.194518 17.521723 17.78833 24.018597 18.401508 24.46464 20.752457 22.570473 17.870035 22.474863 20.783422 24.075064 17.72947 20.202723 16.776543 19.087515 7.232176 8.508578 7.5457883 10.0660925 13.344348 5.5784864 5.3469315 17.087952

I'm trying to read exceldata from excel file and using those data i want to draw a line chart using javascript.but i can't figure it out how will i use the data to draw a chart even though i read the exceldata from excel sheet without using ActiveXObject.Here is my code== 我正在尝试从excel文件中读取exceldata，并使用这些数据我想使用javascript。来绘制折线图，但是即使我从excel中读取了exceldata，我也无法弄清楚我将如何使用该数据绘制图表不使用ActiveXObject的工作表。这是我的代码==

function Upload() 
{  
    var fileUpload = document.getElementById("fileUpload");  
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;  
  if (regex.test(fileUpload.value.toLowerCase())) 
        {  
            if (typeof(FileReader) != "undefined") 
            {  
                var reader = new FileReader();  
                reader.onload = function(e) 
                {  
                    var table = document.createElement("table");  
                    var rows = e.target.result.split("\n");  
                    for (var i = 0; i < rows.length; i++) 
                        {  
                            var row = table.insertRow(-1);  
                            var cells = rows[i].split(",");  
                            for (var j = 0; j < cells.length; j++) 

                            {  
                                var cell = row.insertCell(-1);  
                                cell.innerHTML = cells[j];  
                            }  
                        }  
                    var dvCSV = document.getElementById("dvCSV");  
                    dvCSV.innerHTML = "";
                    dvCSV.appendChild(table);

                //  dvCSV.appendChild("Workdate \t Data \t Status");  

                }  


            reader.readAsText(fileUpload.files[0]);  
        } 
        else 
            {  
                alert("This browser does not support HTML5.");  
            }  
} 
    else 
    {  
        alert("Please upload a valid CSV file.");  
    }  
} 
</script> 
<body>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" onclick = "Upload()" />
<hr />

<div id="dvCSV">

</div>

Please can anyone help me out... 请任何人帮我...

Answer 1

Here is another perspective on this problem, instead of reading an Excel file with JavaScript, you could directly use JavaScript in Excel with the help of the Funfun Excel add-in. 这是关于此问题的另一种观点，您可以在Funfun Excel加载项的帮助下直接在Excel中使用JavaScript，而不是使用JavaScript读取Excel文件。 Basically, Funfun is a tool that allows you to use JavaScript in Excel so you could use libraries like Chart.js to plot chart from the data in the spreadsheet. 基本上，Funfun是允许您在Excel中使用JavaScript的工具，因此您可以使用Chart.js之类的库从电子表格中的数据绘制图表。

First of all, you need to arrange your data a little bit to look like below.(I only took 10 of your data points as example) 首先，您需要对数据进行一些整理，如下所示（我仅以10个数据点为例）

Then, here are some steps to what you need to do to use JavaScript in Excel. 然后，这是在Excel中使用JavaScript所需执行的一些步骤。

1). 1）。 Insert the Funfun add-in from Office Add-ins store 从Office加载项存储中插入Funfun加载项

2). 2）。 Create a new Funfun or load a sample from Funfun online editor. 创建一个新的Funfun或从Funfun在线编辑器中加载示例。 If you creat a new funfun, you could write your own JavaScript code. 如果创建新的funfun，则可以编写自己的JavaScript代码。 In this case, I've already made a sample in Funfun online editor using JavaScript and Chart.js. 在这种情况下，我已经使用JavaScript和Chart.js在Funfun在线编辑器中制作了一个示例。 You could directly load the code from the URL below. 您可以直接从下面的URL加载代码。

https://www.funfun.io/1/edit/5a36a1ad45ac15144af3fdfd https://www.funfun.io/1/edit/5a36a1ad45ac15144af3fdfd

3). 3）。 Write JavaScrip code as you do in any other JavaScript editor. 就像在其他任何JavaScript编辑器中一样编写JavaScrip代码。 In this step, in order to directly use the data from the spreadsheet, you need to write some JSON I/O to make Excel cell reference. 在此步骤中，为了直接使用电子表格中的数据，您需要编写一些JSON I / O以使Excel单元格引用。 The place this value is in Setting-short . 该值在Setting-short中的位置 。 But this would be just several lines. 但这只是几行。 For this case, the JSON I/O value would be: 对于这种情况，JSON I / O值为：

{
    "data": "=B2:K2",
    "label": "=B1:K1"
}

You could check the Funfun documentation for more explanation. 您可以查看Funfun文档以获取更多说明。

4). 4）。 Run the code to plot chart 运行代码以绘制图表

Have fun:) 玩得开心：）

Disclosure: I'm a developer of Funfun. 披露：我是Funfun的开发人员。

通过使用javascript从excel文件中读取excel数据来绘制折线图

问题描述

1 个解决方案

解决方案1
2 2017-12-17 17:15:53

通过使用javascript从excel文件中读取excel数据来绘制折线图

问题描述

1 个解决方案

解决方案1 2 2017-12-17 17:15:53

解决方案1
2 2017-12-17 17:15:53