Question

我希望在同一页面上放置2个或更多图表，但每次我放第2个图表时，第二个图表都会消失。添加2个或更多图表的正确方法是什么？

<body>
      <div class="wrapper">
      <canvas id="1" width="800" height="450"></canvas>
      <canvas id="2" width="800" height="450"></canvas>
</div>

var ctx = document.getElementById("myChart");
var myChart = new Chart(document.getElementById("1"), {
    type: 'bar',
    data: {
  labels: ["name1", "name2"],
  datasets: [
    {
      label: "1",
      backgroundColor: "#01cc90",
      data: [20,50]
    }
  ]
},
options: {
  title: {
    display: false,
    text: 'Name'
  }
}
}


 );

Answer 1

<强> HTML

<canvas id="chartOneContainer" width="600" height="400"></canvas>
<br />
<canvas id="chartTwoContainer" width="600" height="400"></canvas>

<强> JAVASCRIPT

var optionsOne = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [ 
            {
                label: 'Colors One',
                data: [7, 11, 5],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        xAxes: [{
        ticks: {
                    display: true
        }
      }]
    }
  }
}

var optionsTwo = {
  type: 'line',
  data: {
    labels: ["Green", "Purple", "Orange"],
    datasets: [ 
            {
                label: 'Colors Two',
                data: [8, 3, 7],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        xAxes: [{
        ticks: {
                    display: true
        }
      }]
    }
  }
}

var ctxOne = document.getElementById('chartOneContainer').getContext('2d');
new Chart(ctxOne, optionsOne);

var ctxTwo = document.getElementById('chartTwoContainer').getContext('2d');
new Chart(ctxTwo, optionsTwo);

。

JSFiddle上的示例

https://jsfiddle.net/u4gs1ttm/

Chart.js同一网页上有多个图表

1 个答案: