时间戳

首页 > 解决方案 > Javascript 中的 Json 数据可视化与 chartjs

chart.js - Javascript 中的 Json 数据可视化与 chartjs

问题描述

<html>
<body>
    <canvas id="chart" style="width:400%;max-width:400px"></canvas>
      <script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js">
      </script>
      
      <script >

        const xlabels= [];
        chartit();
        async function chartit(){
         await getData();
        const ctx = document.getElementById('chart').getContext('2d');
        const xlabels = [];
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels:  xlabels,
                datasets: [{
                  label: "Covid-19",
                    fill: true,
                    lineTension: 0.1,
                    backgroundColor: "rgba(204, 16, 52, 0.5)",
                    borderColor: "#CC1034",             
                    data: xlabels
                }]
            },
  });
};
     
async function getData(){
        const response =await fetch('https://disease.sh/v3/covid-19/historical/Lebanon? 
    lastdays=30');
   const data = await response.json();
    const {timeline} = data;
    xlabels.push(timeline.cases);
    console.log(timeline.cases);
    };
      
</script>
</body>
</html>

我可以在控制台中获取数据，但是当我将其存储到 xlabels 时，图表上什么也没有出现，我想在 x 轴上显示日期和在 y 轴上显示案例数在此处输入图像描述

它应该看起来像这样

在此处输入图像描述

标签： chart.js

解决方案

您没有将正确的数据传递给图表对象。

下面的例子：

let xlabels = [];

chartit();

async function chartit() {
  await getData();
  const ctx = document.getElementById("chart").getContext("2d");
  const myChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: xlabels.map(o => o.date),
      datasets: [
        {
          label: "Covid-19",
          fill: true,
          lineTension: 0.1,
          backgroundColor: "rgba(204, 16, 52, 0.5)",
          borderColor: "#CC1034",
          data: xlabels.map(o => o.cases),
        },
      ],
    },
  });
}

async function getData() {
  const response = await fetch(
    "https://disease.sh/v3/covid-19/historical/Lebanon?lastdays=30"
  );
  const data = await response.json();
  const { timeline } = data;
  const cases = timeline.cases;
  for (const item in cases) {
    xlabels.push({ date: item, cases: cases[item] });
  }
  //console.log(timeline.cases);
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<html>
  <body>
    <canvas id="chart" style="width: 400%; max-width: 400px"></canvas>
  </body>
</html>

推荐阅读