先看效果：
源代码：
</div><div data-lake-id="e70f29a202148dc68ac3649b3c4006dd">#myChart1, #myChart2,#myChart3,#myChart4,#myChart5,#myChart6,</div><div data-lake-id="e43fed0fb36d98ae35203c84e6d95b04">#barChart1, #barChart2,#barChart3,#barChart4,#barChart5,#barChart6</div><div data-lake-id="914f41a7b0dafc431b2c6755210e5b4d"> {</div><div data-lake-id="9fcc181c886b15051a8c46eed23f1444"> display: inline !important;</div><div data-lake-id="5b155cb3c38172ba107820a98b348ec1">}</div><div data-lake-id="ffacfb5c82c8a92be76dac161d772476">
</div><div data-lake-id="dce86936b2306e47ec6b1b2397139f3b">function getBodyNode(){</div><div data-lake-id="47f985fa64eb650d45be6f017248befa"> return document.getElementById("body");</div><div data-lake-id="5c7b69d85c19f6924ece35f230b2d120">}</div><div data-lake-id="711609672fa5d3903fe4ad7e50c4f3ce">function loaded(){</div><div data-lake-id="addb83006f8d53311bbb16cd06ac9e7f"> var totalWidth = getBodyNode().clientWidth;</div><div data-lake-id="1f65ccf0176257855fb77a79d8a1c204"> console.log("width in load: " + totalWidth);</div><div data-lake-id="40ebf330b23ce6b7377091e6542af0b6"> var aCharts = document.getElementsByTagName("canvas");</div><div data-lake-id="d40b2dfeb085797dd12395c9d3ce6739"> for( var i = 0; i < aCharts.length; i++){</div><div data-lake-id="ed6775df5907fb0fb0984e687c299f46"> aCharts[i].width = totalWidth / 6.5;</div><div data-lake-id="1d202b2c144991f45d0c479a503d4e02"> }</div><div data-lake-id="4694dc3b7e001f8b81b1b4c458a0d56e"> var option = {</div><div data-lake-id="06777472c8f77a9a70e7a77dcabcdb6e"> tooltips: {</div><div data-lake-id="57b9cd55d91f959c658ab62882ac5b56"> enabled:false</div><div data-lake-id="2446081d30da5a328c64dffbf6368256"> },</div><div data-lake-id="af6df9bc8f2aa6faee9d7cf59c2ca23f"> type: "pie",</div><div data-lake-id="686bbc35474e74ef54ecebace6b33dd6"> xAxisData: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],</div><div data-lake-id="408be3c80cd1850abf00052adb0125c5"> yAxisData: [12, 19, 3, 5, 2, 3],</div><div data-lake-id="7219eb3d732793867e2f6920542e3e92"> yAxisLabel: "Number of Votes"</div><div data-lake-id="c90a8d5439e6ab7562a34d012f3a91cc"> };</div><div data-lake-id="7fb07a0f40272765e2b3fb097feb20a5"> for( var i = 1; i <= 6; i++ ){</div><div data-lake-id="2a29692eb86c5b3ff5b4012bafa5fa1c"> createChartOnCanvas("myChart" + i, option);</div><div data-lake-id="db92ddb6cfe0ca78e79d2143a5a56414"> }</div><div data-lake-id="dd8a1823a8d527cb36b0affb510f2995"> option.type = "bar";</div><div data-lake-id="b9048fb08a06d6099f2e4cea0d921ef7"> for( var i = 1; i <= 6; i++ ){</div><div data-lake-id="69d0fe084e1ec531f5cc6f54a108d3e0"> createChartOnCanvas("barChart" + i, option);</div><div data-lake-id="2796031d49cf249143bd232b8fceeec1"> }</div><div data-lake-id="e680871baf3f0f8bf973aeb7227c178b">}</div><div data-lake-id="5913ae67b3ac06d532f616d0f0ce5ead">/*</div><div data-lake-id="bebdc56f32aa82f710cfdf3b05372fb7"> {</div><div data-lake-id="c606a43585e7835df0e5e4a689f6d5c7"> type: pie,</div><div data-lake-id="d4f8a80358b0373cc76326582bf04834"> xAxisData: [],</div><div data-lake-id="c0229095de602d57c3f3f878302fb10c"> yAxisData: [],</div><div data-lake-id="9afb5c5736e94569602e613dc17e98ec"> yAxisLabel: '# of Votes'</div><div data-lake-id="f1209e0cd5a1232e1ddc2b0f0d5ee8f0"> }</div><div data-lake-id="4bd45e3871fd19a24555968a0cb79e73">*/</div><div data-lake-id="f7c699cceaa03fe04e9b4b371befee20">function createChartOnCanvas(canvasId, oChartOption){</div><div data-lake-id="21f5260d2c7bd62ad39805dcaf794cda"> var ctx = document.getElementById(canvasId).getContext('2d');</div><div data-lake-id="f42f47e29d8c683f94a03e140619e75b"> var myChart = new Chart(ctx, {</div><div data-lake-id="fad4b5bbb057919478100205a23e7daf"> type: oChartOption.type,</div><div data-lake-id="b9ccd065ea8c74ee89f5eec4223a3f15"> data: {</div><div data-lake-id="a8cd2169be54ba8bd8d7509efe1fdad6"> labels: oChartOption.xAxisData,</div><div data-lake-id="9a17761b7c7c328f8f8b433c497756fa"> datasets: [{</div><div data-lake-id="0a51327efaddf930b60284908c643530"> label: oChartOption.yAxisLabel,</div><div data-lake-id="031d45cab11164ff106d45205c360277"> data: oChartOption.yAxisData,</div><div data-lake-id="87fcfc84f3e789ca9c039ae0c8024d28"> backgroundColor: [</div><div data-lake-id="137d58b63196ee186302406a3bdbcf5c"> 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)',</div><div data-lake-id="abf3318b01d458c0e119ac35c73e894a"> 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'</div><div data-lake-id="7b9668f929dcdba6d6e51c8cbb19603d"> ],</div><div data-lake-id="2ae0adc62738b631edea836279b54299"> borderColor: [</div><div data-lake-id="5927998af2dff5d42dae01dbdbf58d5b"> 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)',</div><div data-lake-id="23eba67245da0f7f3cf8945b858d1e5b"> 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)'</div><div data-lake-id="298da935547cee44007f0483ab391941"> ],</div><div data-lake-id="e38c35f0f5ba4572919662896644e7cb"> borderWidth: 1</div><div data-lake-id="0957f421dffaafe72fb2b365eb994ef4"> }]</div><div data-lake-id="6a6e98a503aa75df9c0c8684d7026b14"> },</div><div data-lake-id="3ac0214013253145fb495534bea1eefb"> options: {</div><div data-lake-id="cd29b69d4cc4efa6099e6480a821311d"> responsive: false,</div><div data-lake-id="290016e86e3814e4315f5475d8e34b44"> scales: {</div><div data-lake-id="09441271882138e6cc52066cd6d24530"> yAxes: [{</div><div data-lake-id="e6af60868656f3cd2e801c3167372662"> ticks: {</div><div data-lake-id="345280ab6edd86e05593655bb10fb8d7"> beginAtZero:true</div><div data-lake-id="821a93cd2fbbb45c8da9f8b734fc550f"> }</div><div data-lake-id="dcce25a8fed4d7a37b515bf85b763036"> }]</div><div data-lake-id="ca9affad3bb956c42a3d7d1d5b805087"> }</div><div data-lake-id="dacb3c09be6ac411e14fa7cb505dd7e8"> }</div><div data-lake-id="db15b478eac85901729860bdc23a0bcb"> });</div><div data-lake-id="bc002ea408a556ddded44e56e2de8133">}</div><div data-lake-id="966491f50aa455cd76c435a6e302d75f">