使用chart.js创建两个饼图只能显示

zkure5ic  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(155)

我用chart.js在同一个页面上创建了两个饼图,但是其中一个不能显示图形。修改javascript仍然不能显示它。我不知道发生了什么。

<div>
      <div style="width: 300px;">
        <canvas id="piechart1"></canvas>
      </div>
    </div>
    <script>
      // setup 
      const data1 = {
        labels: ['connect', 'disconnect'],
        datasets: [{
          label: 'Weekly Sales',
          data: [40,60],
          backgroundColor: [
            'rgba(255, 26, 104, 0.2)',
            'rgba(54, 162, 235, 0.2)'

          ],
          borderColor: [
            'rgba(255, 26, 104, 1)',
            'rgba(54, 162, 235, 1)'
          ],
          borderWidth: 1
        }]
      };

      // config 
      const config1 = {
        type: 'pie',
        data1,
        options: {
          plugins:{
              labels:{
                  render: 'percentage',
                  // position:'outside'
              },
              title: {
                            display: true,
                            text: 'Electromechanical',
                            padding: {
                                top: 10,
                            },
                            font: {
                            size: 18
                        }
                        }
          }
        },
      };

      // render init block
      const piechart1 = new Chart(
        document.getElementById('piechart1'),
        config1
      );
    </script>

    <div>
      <div style="width: 300px;">
        <canvas id="myChart"></canvas>
      </div>
    </div>
    <script>
      // setup 
      const data = {
        labels: ['connect', 'disconnect'],
        datasets: [{
          label: 'Weekly Sales',
          data: [98,2],
          backgroundColor: [
            'rgba(255, 26, 104, 0.2)',
            'rgba(54, 162, 235, 0.2)'

          ],
          borderColor: [
            'rgba(255, 26, 104, 1)',
            'rgba(54, 162, 235, 1)'
          ],
          borderWidth: 1
        }]
      };

      // config 
      const config = {
        type: 'pie',
        data,
        options: {
          plugins:{
              labels:{
                  render: 'percentage',
                  // position:'outside'
              },
              title: {
                            display: true,
                            text: 'Traffic',
                            padding: {
                                top: 10,
                            },
                            font: {
                            size: 18
                        }
                        }
          }
        },
      };

      // render init block
      const myChart = new Chart(
        document.getElementById('myChart'),
        config
      );
    </script>

一开始以为是参数重复导致参数无法显示,修改后只显示标题,图形仍然无法显示。

0md85ypi

0md85ypi1#

问题在于如何配置第一个图表。
当您设置“data”配置时,您使用的是变量名“data1”,而不是CHART.js要求的“data”。

// config 
  const config1 = {
    type: 'pie',
    data1,  // <-- WRONG!!!
    options: {

请使用以下选项:

// config 
  const config1 = {
    type: 'pie',
    data: data1,  // <-- CORRECT!!!
    options: {

相关问题