打开 json 文件以在 chart.js 中创建图表

Question

我正在尝试根据 json 文件中的数据创建图表。 我是编码新手，不确定我在这里做错了什么。 数据未显示在控制台日志中，我收到错误：未捕获的类型错误：无法在图表中读取未定义的属性“日期”：71

这是我的旧 javascript 代码

<script>
       var data;
       
       function preload(){
           data = loadJSON("/home/ubuntu/project/jason/data.json");
       }
       console.log(data);
</script>
<canvas id="chart" width="300" height="300"></canvas>
<script>
        var ctx = document.getElementById('chart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.date,
                datasets: [{
                    label: '# of Votes',
                    data: data.mass, 

我的 json 文件中的数据如下所示

[{"date": "2020/07/28", "mass": 68.3}, {"date": "2020/07/29", "mass": 68.3}, {"date": "2020/07/30", "mass": 69.5}, {"date": "2020/07/31", "mass": 69.8},....]

我已经编辑了我的代码，我意识到我没有从带有标签和坐标的条形图格式中编辑它。 我希望日期和质量是 x 和 y 坐标。 我也尝试实现你所说的映射，但我不确定我是否正确地完成了这个。

<script>
       var data;
       
       function preload(){
           data = loadJSON("/home/ubuntu/project/jason/data.json");
           
       }
      
       const labels = data.map((x) => x.date);
       const ycoordinate = data.map((x) => x.mass);
       console.log(data);
    </script>

<canvas id="chart" width="300" height="300"></canvas>
<script>
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets:[{
               data: ycoordinante
                
            }],
        },
        options: {}});
</script>

Answer 1

您尝试访问 object 字段，但您尝试从阵列中执行此操作，但这种方式不起作用。 为了实现你想要的，你必须改变你的数组。 您可以使用 map 执行此操作，如下所示：

constlabels = data.map((x) => x.date)
const dataFormatted = data.map((x) => x.mass)

如果您将它们放在图表中，它将起作用

Answer 2

您在labels: data.date,如果您尝试检查您的 json 响应，您将看到一个项目数组，因此如果您指定labels: data[0].date

另一个问题您尝试使用 Chartjs 中的折线图，我认为您需要检查如何传递像这样的数据 url： Chartjs - Line （您也将 data.mass 直接放入，并且最多可以获取）

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

例如：

new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
    datasets: [{ 
        data: [86,114,106,106,107,111,133,221,783,2478],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411,502,635,809,947,1402,3700,5267],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178,190,203,276,408,547,675,734],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }, { 
        data: [40,20,10,16,24,38,74,167,508,784],
        label: "Latin America",
        borderColor: "#e8c3b9",
        fill: false
      }, { 
        data: [6,3,2,2,7,26,82,172,312,433],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'World population per region (in millions)'
    }
  }
});

因此，解决方案是从 json 获取所有项目，并像对数据集的data.map((data) => data.mass)和标签一样的数据执行 map 一样传递它。

更新 1

 let data = [{"date": "2020/07/28", "mass": 68.3}, {"date": "2020/07/29", "mass": 68.3}, {"date": "2020/07/30", "mass": 69.5}, {"date": "2020/07/31", "mass": 69.8}]; const labels = data.map((x) => x.date); const ycoordinate = data.map((x) => x.mass); var ctx = document.getElementById('chart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: labels, datasets:[{ data: ycoordinate }], }, options: {}});

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <canvas id="chart" width="300" height="300"></canvas>