html - 如何解析 .csv 文件的列而不是手动写入值

问题描述

我希望能够通过仅使用 .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>

标签： htmlid3

html - 如何解析 .csv 文件的列而不是手动写入值

问题描述

解决方案

推荐阅读