Javascript 使用chart.js和CSV数据绘制折线图

我有CSV数据。使用这些数据，我需要使用chart.js库绘制一个简单的折线图

data.csv “年”、“比率” 1952-53,3.00% 1953-54,3.00% 1954-55,3.50%

---

我希望年份在x轴，比率在y轴…我需要完全使用chart.js。有人能帮我这样做吗？

Chartjs不支持直接CSV文件。因此，您必须将其转换为类似JSON的格式。您可以做的是在php/nodejs中创建一个服务器端脚本，该脚本将在运行时将csv转换为json。然后将数据交给chartjs

$file="1_23.csv";
$csv= file_get_contents($file);
$array = array_map("str_getcsv", explode("\n", $csv));
$json = json_encode($array);
print_r($json);

---

一个选项是使用

假设您在

data.csv

中有这样的数据：

"year","rate"
1952-53,3.00
1953-54,3.00
1954-55,3.50

首先创建一个函数，将CSV列数据映射到数组：

function makeChart(sampledata) {
 var sampledataLabels = sampledata.map(function(d) {
       return d.year;
         });
  var weeksData = sampledata.map(function(d) {
        return +d.rate;
          });

  var chart = new Chart('chart', {
        type: "line",
            data: {
              labels: sampledataLabels,
              datasets: [
                  {
                      data: weeksData
                  }
                ]
              }
          });
}

然后通过

d3.csv（）

---

我从这个优秀的

中获得了大部分代码。您尝试了什么？我尝试过使用chart.js绘制折线图。但无法绘制x轴和y轴。共享您的代码将有助于我们帮助您我已将csv转换为json，但仍然没有实现。因此chartjs对于日期来说并不太好。尝试canvasjs我已经将csv转换为json，但下面仍然没有出现json格式：[{“FIELD1”：“YEAR”，“FIELD2”：“RATE”}，{“FIELD1”：“1952-53”，“FIELD2”：“3.00%”，}，{“FIELD1”：“1953-54”，“FIELD2”：“3.00%”您的格式不正确。在“速率”字段中。它必须是整数/浮点。您的费率包含“%”符号。去掉那个。同样在年份字段中，“-53”是什么？@shruthi请投票/接受我的答案，如果它对你有帮助的话

d3.csv('so_chart.csv')
  .then(makeChart);