ChartJS 使用chart js创建两个内联图表

我试图创建两个内联图表到我的网页;

我尝试使用chart.js创建饼图和面团图，但只得到一个图表，尽管我在代码中为这两个图表都输入了内容。

**编辑：**对代码进行编辑。

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<style>
  .gfg {
    display: inline;
}
</style>
<body>
    <canvas id="myChart1" width="90" height="90" style="width:100%;max-width:650px"></canvas>
    <canvas id="myChart2" width="90" height="90" style="width:100%;max-width:650px"></canvas>
    <script>
      function getColors(length) {
        let pallet = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
        let colors = [];
        for (let i = 0; i < length; i++) {
          colors.push(pallet[i % (pallet.length - 1)]);
        }
        return colors;
      }
      var xValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test'];
      var yValues = [2, 100, 223, 84, 197];
      var barColors = getColors(xValues.length);
      new Chart("myChart1", {
        type: "pie",
        data: {
          labels: xValues,
          datasets: [{
            backgroundColor: barColors,
            data: yValues
          }]
        },
        options: {
          "legend": {
            "display": true,
            "labels": {
              "fontSize": 20,
            }
          },
          title: {
            display: true,
            fontColor: 'rgb(255, 0, 0)',
            fontSize: 25,
            text: "Products in shortage (by number)"
          }
        }
      });
      var xxValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test','kinley'];
      var yyValues = [2, 100, 223, 84, 197,100];
      var barColors = getColors(xxValues.length);
      new Chart("myChart2", {
        type: "pie",
        data: {
          labels: xxValues,
          datasets: [{
            backgroundColor: barColors,
            data: yyValues
          }]
        },
        options: {
          "legend": {
            "display": true,
            "labels": {
              "fontSize": 20,
            }
          },
          title: {
            display: true,
            fontColor: 'rgb(255, 0, 0)',
            fontSize: 25,
            text: "Products in shortage (by number)"
          }
        }
      });
    </script>
</body>
</html>

如何在网页上插入两个内联图表？我是chart.js的初学者。

你的脚本标签似乎是重复的，我不确定这是不是故意的，但你用第二个脚本标签覆盖了第一个脚本标签中声明的任何函数和变量。
无论如何，这里的问题是，您在一个画布上加载了两个ID相同的图表。
将第二个图表的名称设置为myChart2，并添加另一个画布，其ID为myChart2：

new Chart("myChart", {
...
new Chart("myChart2", {
...

对于画布：

<canvas id="myChart" width="90" height="90" style="width:100%;max-width:650px"></canvas>
<canvas id="myChart2" width="90" height="90" style="width:100%;max-width:650px"></canvas>

这应该加载图表和内联都可以通过css使用flexbox或inline-block显示来完成。

ChartJS 使用chart js创建两个内联图表

1条答案

相关问题

热门标签

最新问答