[javascript]
<script src="js/chart.min.js"></script>
var barChartData = {
labels :
["2016-01-01(五)","2016-01-02(六)","2016-01-04(一)","2016-01-05(二)","2016-01-06(三)","2016-01-07(四)","2016-01-08(五)","2016-01-09(六)","2016-01-11(一)"],
datasets :
[
{
label:"來客數",
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [45,63,252,220,131,152,152,63,59]
},{
label:"女姓",
fillColor : "rgba(48, 164, 255, 0.2)",
strokeColor : "rgba(48, 164, 255, 0.8)",
highlightFill : "rgba(48, 164, 255, 0.75)",
highlightStroke : "rgba(48, 164, 255, 1)",
data : [45,62,252,220,131,152,152,63,58]
},{
label:"男姓",
fillColor : "rgba(255, 100, 178, 0.2)",
strokeColor : "rgba(255, 100, 178, 0.8)",
highlightFill : "rgba(255, 100, 178, 0.75)",
highlightStroke : "rgba(255, 100, 178, 1)",
data : [0,0,0,0,0,0,0,0,0]
}
]
}
window.onload = function(){
var chart2 = document.getElementById("bar-chart").getContext("2d");
window.myBar = new Chart(chart2).Bar(barChartData, {
responsive : true,
barValueSpacing : 5,
barDatasetSpacing : 1,
tooltipFillColor: "rgba(0,0,0,0.8)",
multiTooltipTemplate: "<%= datasetLabel %> – <%= value %> "
});
};
[/javascript]
[ JQUERY ] – Chart.js 顯示 長條圖說明
評等結果
點擊便能為這篇文章進行評等!
[評等總次數: 0,平均評等: 0]
評等結果
點擊便能為這篇文章進行評等!
[評等總次數: 0,平均評等: 0]