chart.js ajax,chart.js创建图表实例

hello chart.js

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'

}

}

}

});