发布：2023/12/7 15:16:28作者：大数据 来源：大数据 浏览次数：498
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<html> <head> <title>hello chart.js</title> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script> </head> <body> <div style="width:500px;height:500px"><canvas id="chart"></canvas></div> <div style="width:500px;height:500px"><canvas id="myChart"></canvas></div> <script> var ctx = document.getElementById("chart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["A", "B", "C", "D", "E", "F"],// datasets: [{ label: '', data: [528, 105, 4,233,22,32,32], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { title: { display: true, text: '学校类别' }, tooltips: { enabled: false }, legend: { display: false, labels: { fontColor: 'rgb(255, 99, 132)' } }, plugins: { datalabels: { align: 'top', anchor: 'end', formatter: function(value, context) { return Math.round(value/637*100) + '%('+value+')';// } } } } }); var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["A", "B", "C", "D", "E", "F"], datasets: [{ label: '答案', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { title: { display: true, text: 'Custom Chart Title' }, tooltips: { enabled: false, intersect: true }, legend: { display: false, labels: { fontColor: 'rgb(255, 99, 132)' } }, plugins: { datalabels: { align: 'top', anchor: 'end' } } } }); </script> </body> </html> |
