JavaScript介面畫柱狀圖

JavaScript介面畫柱狀圖
chart.js 基於H5的canvas,輕量級的圖表外掛。
有6中圖表型別：折線圖、條形圖、雷達圖、餅圖、柱狀圖、極地區域圖

關於柱狀圖的繪製，追加 、更新、刪除資料等操作的總結
html:程式碼

XX飲料營業額情況一覽表

 

css:程式碼

 .bar-legend li span {

width: 1em;

height: 1em;

display: inline-block;

margin-right: 5px;

}

.bar-legend {

list-style: none;

}

javascript:程式碼

// 柱狀圖資料

var chartData = {

    // x軸顯示的label,label內容也可為一個陣列，直接輸入陣列名稱即可。

   labels:['1月', '2月', '3月', '4月', '5月', '6月', '7月'],    

datasets:[

    { fillColor:'#62a8ea',    // 填充色

      data:[60, 70, 80, 56, -40, 90, 58],    // 資料，此處也可為陣列，直接為陣列名即可。

     label:'月銷售量'      // 圖例

} ] };

// 柱狀圖選項設定

var configs = { scaleOverlay : false,     // 網格線是否在資料線的上面

scaleOverride : false,      // 是否用硬編碼重寫y軸網格線

scaleSteps : null,       //y軸刻度的個數

scaleStepWidth : null,       //y軸每個刻度的寬度

scaleStartValue : null,     //y軸的起始值

scaleLineColor : "rgba(0,0,0,.1)",     // x軸y軸的顏色

scaleLineWidth : 1,        // x軸y軸的線寬

scaleShowLabels : true,     // 是否顯示y軸的標籤

scaleLabel : "",      // 標籤顯示值

scaleFontFamily : "'Arial'",      // 標籤的字型

scaleFontSize : 12,       // 標籤字型的大小

scaleFontStyle : "normal",     // 標籤字型的樣式

scaleFontColor : "#666",      // 標籤字型的顏色

scaleShowGridLines : false,     // 是否顯示網格線

scaleGridLineColor : "rgba(0,0,0,.05)",       // 網格線的顏色

scaleGridLineWidth : 1,      // 網格線的線寬

scaleBeginAtZero: false,        // y軸標記是否從0開始

scaleShowHorizontalLines: true,        // 是否顯示橫向線

scaleShowVerticalLines: true,     // 是否顯示豎向線

barShowStroke : true,        // 是否顯示線

barStrokeWidth : 2,       // 線寬

barValueSpacing : 5,         // 柱狀塊與x值所形成的線之間的距離

barDatasetSpacing : 1,         // 在同一x值內的柱狀塊之間的間距

animation : true,     //是否有動畫效果

animationSteps : 60,        //動畫的步數

animationEasing : "easeOutQuart",      // 動畫的效果

showTooltips: false,       // 是否顯示提示

// 圖例

legendTemplate : '
',

// 動畫完成後呼叫的函式(每個柱上顯示對應的資料)

onAnimationComplete: function () {

      var ctx = this.chart.ctx;

      ctx.font = this.scale.font;

       ctx.fillStyle = this.scale.textColor;

       ctx.textAlign = 'center';

       ctx.textBaseline = 'bottom';

     this.datasets.forEach(function (dataset){

                dataset.bars.forEach(function (bar) {

                                ctx.fillText(bar.value, bar.x, bar.y);

                             });

         });

  }

  };

// 開始繪製柱狀圖

var ctx = document.getElementById('bar').getContext('2d');

var bar = new Chart(ctx).Bar(chartData, configs);

var legend = document.getElementById('legend');

// 圖例

legend.innerHTML = bar.generateLegend();