js界面畫柱狀圖

時間 2019-11-25

標籤界面柱狀欄目 JavaScript 简体版

原文原文鏈接

chart.js 基於H5的canvas,輕量級的圖表插件。
有6中圖表類型：折線圖、條形圖、雷達圖、餅圖、柱狀圖、極地區域圖javascript

關於柱狀圖的繪製，追加、更新、刪除數據等操做的總結

原文來自於：http://lishangrong.github.io/2016/01/28/20160128-chartjs(bar)/css

html:代碼html

<!DOCTYPE html>java

<html>git

<head lang="en">github

<title>bar chart</title>ide

</head>函數

<body>

<h5 class="bar-title">XX飲料營業額狀況一覽表</h5>

</body>

</html>

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 : "<%=value%>", // 標籤顯示值

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 : '<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',

// 動畫完成後調用的函數(每一個柱上顯示對應的數據)

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();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

js界面畫柱狀圖

關於柱狀圖的繪製，追加 、更新、刪除數據等操做的總結

關於柱狀圖的繪製，追加、更新、刪除數據等操做的總結