如何将csv导入chart.js？

jrcvhitl  于 2022-11-06  发布在  Chart.js
关注(0)|答案(4)|浏览(230)

我一直在寻找这个解决方案，但似乎找不到它。chart.js支持这个吗？
我尝试用papaparse解析数据，但由于我的知识有限，我找不到解决方案。

chart.js

4条答案

按热度按时间
elcex8rz

elcex8rz1#

有一个Chart.js插件chartjs-plugin-datasource，可以轻松地从CSV文件加载数据。
假设您有一个如下所示的CSV文件，它以sample-dataset.csv的格式保存在HTML文件所在的目录中：

,January,February,March,April,May,June,July
Temperature,7,7,10,15,20,23,26
Precipitation,8.1,14.9,41.0,31.4,42.6,57.5,36.0

在您的页面中包含Chart.js和chartjs-plugin-datasource：

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>

<canvas id="myChart"></canvas>

然后，在脚本中指定sample-dataset.csv。默认情况下，CSV文件中的每一行都将Map到一个数据集，第一列和第一行将分别被视为数据集标签和索引标签。您还可以使用选项自定义如何解析CSV数据。

var ctx = document.getElementsById("myChart");
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            type: 'line',
            yAxisID: 'temperature',
            backgroundColor: 'transparent',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            tension: 0,
            fill: false
        }, {
            yAxisID: 'precipitation',
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            borderColor: 'transparent'
        }]
    },
    plugins: [ChartDataSource],
    options: {
        scales: {
            yAxes: [{
                id: 'temperature',
                gridLines: {
                    drawOnChartArea: false
                }
            }, {
                id: 'precipitation',
                position: 'right',
                gridLines: {
                    drawOnChartArea: false
                }
            }]
        },
        plugins: {
            datasource: {
                url: 'sample-dataset.csv'
            }
        }
    }
});
赞(0）分享  回复(0）举报  2022-11-06
hgncfbus

hgncfbus2#

下面是我的解决方案，我的工作很好。我有一个CSV文件如下：

country,population
China,1415046
India,1354052
United States,326767
Indonesia,266795
Brazil,210868
...

我想用我的数据集绘制一个条形图，y-axis是population，x-axis是country。
这是我的HTML文件的body。

<body>
    <canvas id="myChart" width="100" height="100"></canvas>
    <script>
      // Load the dataset
      d3.csv("data.csv").then(makeChart);

      // Plot the data with Chart.js
      function makeChart(countries) {
        var countryLabels = countries.map(function (d) {
          return d.country;
        });
        var populationData = countries.map(function (d) {
          return d.population;
        });

        var chart = new Chart("myChart", {
          type: "bar",
          data: {
            labels: countryLabels,
            datasets: [
              {
                data: populationData 
              }
            ]
          }
        });
      }
    </script>
</body>

结果：

您可以使用Codesandbox来尝试。

赞(0）分享  回复(0）举报  2022-11-06
niknxzdl

niknxzdl3#

我也经常需要这样做。这里有一个关于如何create a chart with Chart.js from a CSV file的链接，它解释了如何直接从CSV文件中使用Chart.js创建图表。
此使用案例说明了如何使用www.example.com Web服务将CSV文件转换为JSONFlex.io（* 完整披露：我是Flex.io的高级前端开发人员 *）。
如果您想了解实际的使用案例，请参阅以下JsFiddle：

function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

$.ajax({
  type: 'post',
  url: 'https://www.flex.io/api/v1/pipes/flexio-chart-js-csv-to-json/run?stream=0',
  beforeSend: function(xhr) {
    xhr.setRequestHeader('Authorization', 'Bearer nmgzsqppgwqbvkfhjdjd');
  },
  data: $('form').serialize(),
  dataType: "json",
  success: function(content) {
    // render the JSON result from from the Flex.io pipe
    $("#flexio-result-data").text(JSON.stringify(content, null, 2))

    var first_item = _.get(content, '[0]', {})

    var column_labels = _.map(_.omit(first_item, ['os']), function(val, key) {
      if (key != 'os')
        return key
    })

    // use Lodash to reformat the JSON for use with Chart.js
    var datasets = _.map(content, function(item) {
      // use the 'os' column as our label
      var item_label = _.get(item, 'os', 'Not Found')

      // create an array of number values from each item's JSON object
      var item_values = _.map(_.omit(item, ['os']), function(val) {
        return parseFloat(val)
      })

      return {
        label: item_label,
        data: item_values,
        backgroundColor: getRandomColor()
      }
    })

    var chart_data = {
      labels: column_labels,
      datasets: datasets
    }

    // render the JSON result after mapping the data with Lodash
    $("#chart-data").text(JSON.stringify(chart_data, null, 2))

    // render the chart using Chart.js
    var ctx = document.getElementById("canvas").getContext("2d");
    window.my_chart = new Chart(ctx, {
      type: 'bar',
      data: chart_data,
      options: {
        responsive: true,
        legend: {
          position: 'top'
        },
        title: {
          display: true,
          text: 'Use Flex.io to Create a Chart With Chart.js Directly From a CSV File'
        }
      }
    });
  }
});

请随意浏览用例，如果您有任何问题，请告诉我。

赞(0）分享  回复(0）举报  2022-11-06
sqxo8psd

sqxo8psd4#

将CSV数据导入ChartJS的简单示例
  1. index.html：
<!-- ChartJS plugin datasrouce example

chartjs-plugin-datasource: https://nagix.github.io/chartjs-plugin-datasource/
Samples: https://nagix.github.io/chartjs-plugin-datasource/samples/
Specific example: https://nagix.github.io/chartjs-plugin-datasource/samples/csv-index.html

Data source: https://gist.githubusercontent.com/mikbuch/32862308f4f5cac8141ad3ae49e0920c/raw/b2b256d69a52dd202668fe0343ded98371a35b15/sample-index.csv -->

<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
</head>
<body>
    <div>
        <canvas id="myChart"></canvas>
    </div>
    <script src="script.js"></script>
</body>

您也可以下载this index.html file as a gist。

  1. script.js
// ChartJS plugin datasrouce example

// chartjs-plugin-datasource: https://nagix.github.io/chartjs-plugin-datasource/
// Samples: https://nagix.github.io/chartjs-plugin-datasource/samples/
// Specific example: https://nagix.github.io/chartjs-plugin-datasource/samples/csv-index.html

// Data source: https://gist.githubusercontent.com/mikbuch/32862308f4f5cac8141ad3ae49e0920c/raw/b2b256d69a52dd202668fe0343ded98371a35b15/sample-index.csv

var chartColors = {
    red: 'rgb(255, 99, 132)',
    blue: 'rgb(54, 162, 235)'
};

var color = Chart.helpers.color;
var config = {
    type: 'bar',
    data: {
        datasets: [{
            type: 'line',
            yAxisID: 'temperature',
            backgroundColor: 'transparent',
            borderColor: chartColors.red,
            pointBackgroundColor: chartColors.red,
            tension: 0,
            fill: false
        }, {
            yAxisID: 'precipitation',
            backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
            borderColor: 'transparent'
        }]
    },
    plugins: [ChartDataSource],
    options: {
        title: {
            display: true,
            text: 'CSV data source (index) sample'
        },
        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                id: 'temperature',
                gridLines: {
                    drawOnChartArea: false
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Temperature (°C)'
                }
            }, {
                id: 'precipitation',
                position: 'right',
                gridLines: {
                    drawOnChartArea: false
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Precipitation (mm)'
                }
            }]
        },
        plugins: {
            datasource: {
                type: 'csv',
                url: 'https://gist.githubusercontent.com/mikbuch/32862308f4f5cac8141ad3ae49e0920c/raw/b2b256d69a52dd202668fe0343ded98371a35b15/sample-index.csv',
                delimiter: ',',
                rowMapping: 'index',
                datasetLabels: true,
                indexLabels: true
            }
        }
    }
};

window.onload = function() {
    var ctx = document.getElementById('myChart').getContext('2d');
    window.myChart = new Chart(ctx, config);
};

这是一个a gist with this script.js file。
1.确保这两个文件位于同一目录中。
1.使用浏览器打开index.html。

其他材料

CodeSandbox example以在线预览示例。
发布此答案的原因：
我发布这个是因为人们在用JavaScript从文件系统（直接从计算机）阅读CSV文件时遇到了问题。chartjs-plugin-datasource documentation中的示例没有解释这一点，并且假设用户对处理来自Web的URL和来自文件系统的文件的差异有一些基本的知识。
我的示例只显示了ChartJS数据源插件的基本功能，不需要用于阅读CSV文件的第三方模块。

编辑：

根据ggorlen在评论中的建议，我还在答案中包含了代码片段。

赞(0）分享  回复(0）举报  2022-11-06
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com