1. Home
  2. /
  3. Web technology
  4. /
  5. JQUERY
  6. /
  7. [ JQUERY ] –...

[ JQUERY ] – Chart.js 顯示 長條圖說明

評等結果
點擊便能為這篇文章進行評等!
[評等總次數: 0,平均評等: 0]

[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]

評等結果
點擊便能為這篇文章進行評等!
[評等總次數: 0,平均評等: 0]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *