Chart.js同じWebページに複数のチャートがあります

私は同じページに2つ以上のチャートを置くことを考えていますが、2回目を入れるたびに2番目のチャートが消えます。 2つ以上のグラフを追加する正しい方法は何ですか？Chart.js同じWebページに複数のチャートがあります

<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' 
    } 
} 
} 


);

出典

2017-10-29 JDoe

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);

。

https://jsfiddle.net/u4gs1ttm/

JSFiddleに

例

出典

2017-10-30 02:13:45

Chart.js同じWebページに複数のチャートがあります

答えて

関連する問題