Html + JavaScript + CSV解析+谷歌图表帮助哦快乐xD ..

Html + JavaScript + CSV parsing + Google Charts help oh joy xD ...

本文关键字：帮助 xD 快乐 谷歌 JavaScript CSV 解析 Html      更新时间：2023-09-26

所以我试图做一个程序，将采取一个csv文件，并生成一个谷歌图表，它处理列出当前的虚拟机，然后多少内存在gb他们已经使用vs多少是免费的。我是javascript的新手，花了我大部分的工作日试图得到这个垃圾，所以任何帮助是高度赞赏的!所以目前我使用的是jquery.csv-0.71扩展。为了给你一个csv的示例，我将在这里粘贴一些:

"Name","UsedSpace","Capacity"
"GVLVNX00","378","500"
"GVLVNX01","421","500"
"GVLVNX02","351","500"
"GVLVNX04","421","500"
"GVLVNX05","283","500"

有了这个示例和我的助手jquery csv文件的知识，现在在这里出了什么问题。我敢肯定有很多，一个错误我得到的是有关水平数据不能是一个字符串?这没有意义，我希望虚拟机名称在x轴上derp:/…除此之外，这里是代码。我的目标是做出一个有重叠条的图，我知道这个没有，但至少是一个开始。我甚至找不到任何有条重叠的，就像我想显示空闲和使用的内存，但如果你找到一个更适合的图表，请告诉我代码来完成它:)。所以这里是我的html/javascript部分，有些可能会被注释掉等，因为我得到一个错误或调试。抱歉，如果你读了那么多，我有点跑题了。

<!DOCTYPE html>
<html>
<head>
   <title>Google Chart Example</title>
   <script src="https://www.google.com/jsapi"></script>
   <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   <script src="jquery.csv-0.71.js"></script>
   <script>
   // load the visualization library from Google and set a listener
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
   function drawChart() {
   // grab the CSV
   $.get("DBdatastores.csv", function(csvString) {
   // transform the CSV string into an array
    var arrayData = $.csv.toArrays(csvString);
    // this new DataTable object holds all the data
    var data = new google.visualization.arrayToDataTable(arrayData);
    var options = {
          title: 'Virtual Machine Storage(GB)',
          hAxis: {title: "Virtual Machine Names", titleTextStyle: {color: 'red'}}
        //  vAxis: {title: "Memory In GB", minValue: 0, maxValue: data.getColumnRange(2).max}
        };
    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
    chart.draw(data, options);
     });
    }
   </script>
</head>
<body>
    <div id="chart">
   </div>
</body>
</html>

谢谢你的帮助，如果有人知道如何做这种废话，我是一个php/mysql开发这是不是我理想的任务，哈哈。

问题可能在两个地方之一:要么在您的CSV文件中，要么在jQuery CSV插件中。您的"UsedSpace"answers"Capacity"数据系列被解释为"字符串"类型，这是无效的，以绘制图表-它们必须是"数字"类型。我建议的第一件事是删除CSV中数字周围的引号:

"Name","UsedSpace","Capacity"
"GVLVNX00",378,500
"GVLVNX01",421,500
"GVLVNX02",351,500
"GVLVNX04",421,500
"GVLVNX05",283,500

然后你需要告诉jQuery CSV插件在可能的情况下将你的数据解析为数字:

var arrayData = $.csv.toArrays(csvString, {
    onParseValue: $.csv.hooks.castToScalar
});
相关文章：