如何解析.csv文件的列,而不是手动编写值

时间:2018-07-11 13:31:05

标签: html id3

我希望能够仅在我的.csv文件中使用两列来表示条形图,所以我已经通过手动编写列的值来编写了一个临时解决方案。但是,如果我有更多的列或更多的值在每一列中,都可能无法手动编写它。我很想获得有关如何转换代码以读取.csv文件中的列的帮助,到目前为止,我已经能够获得单个条形图,并且无法进一步编辑代码以使用更多列以获取多个条形图。另外,在找到多个条形图的代码之后-它遍历了.csv文件上的所有列,并显示了图表中的所有列,然后当我尝试仅编辑前两列的for循环时,没有用,所以我决定暂时手动编写。

问题:如何读取条形图表示形式的.csv列(仅两列),而不是像我一样手动编写该列的值。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",{              
        title:{
            text: ""
        },
         axisX:{
       title: "car type"},
        axisY:{
        title:"$", 

         interval: 5000,
  },

    data: [
    {
        type: "column",
        yValueFormatString: "#.####",
        showInLegend: true,
        name: "DealerCost",

        dataPoints: [
            { "label": "Regular", y: 27446.14286 },
            { "label": "Sports.car", y: 48473.16327 },
            { "label": "SUV", y: 31625.35},
            { "label": "Wagon", y: 26645.63333 },
            { "label": "Minivan", y: 25355.5 },
            { "label": "Pickup", y: 22616.75},
        ]
    },

    {
        type: "column",
        showInLegend: true,                  
        name: "RetailPrice",
        yValueFormatString: "#.####",
        dataPoints: [
            { "label": "Regular", y: 29814.3591836735 },
            { "label": "Sports.car", y: 53387.06122 },
            { "label": "SUV", y: 34790.25},
            { "label": "Wagon", y: 28840.53333 },
            { "label": "Minivan", y: 27796.5 },
            { "label": "Pickup", y: 24941.375},

        ]
    },

    ]
    });

    chart.render();
}
</script>

 <div id="chartContainer" style="height: 100%; width: 50%;">
</body>
</html>

enter image description here

enter image description here

0 个答案:

没有答案