chart.js柱狀圖,javascript 柱狀圖

本文目錄一覽：

• 1、chart.js代碼如何把這個柱狀圖代碼中的數據改成動態的
• 2、js代碼怎麼比較柱狀的數值的大小賦予柱狀不同顏色
• 3、chartJs柱狀圖下滑條怎麼寫
• 4、chart.js怎麼生成組合柱狀圖

chart.js代碼如何把這個柱狀圖代碼中的數據改成動態的

data: [‘2014’, ‘2015’, ‘2016’, ‘2017’, ‘2018’]

data: [88, 32, 91, 34, 90],

這兩處就是數據源，改成你要的動態數據就可以了

js代碼怎麼比較柱狀的數值的大小賦予柱狀不同顏色

你好！

為不同數據的柱狀圖賦值對應的顏色，只需要設置series-data中每個元素的color屬性即可。

//定義一個顏色數組

var COLORS = [‘#4dc9f6′,’#f67019′,’#f53794′,’#537bc4′,’#acc236′,’#166a8f’,’#00a950′,’#58595b’,’#8549ba’];

//根據數值返回對應的顏色值

var getColorByData = function(v) {

    return v  80 ? COLORS[0]

         : v  83 ? COLORS[1]

         : v  86 ? COLORS[2]

         : v  87 ? COLORS[3]

         : v  88 ? COLORS[4]

         : v  89 ? COLORS[5]

         : COLORS[6];

}

//對圖表數據進行color屬性賦值,用於顯示

var genData = function(data) {

    if(data  data.length0) {

        for(var i=0;idata.length;i++){

            data[i].color = getColorByData(data[i].y);

        }

    }

    return data;

}

//圖表數據

var _data = [

  {

    name: “下車體1#”,

y: 88,

  },

  {

name: “下車體2#”,

y: 89,

  },

  {

name: “下車體3#”,

y: 82,

  },

  {

name: “下車體4#”,

y: 85,

  },

];

Highcharts.chart(‘gongzhuangjiancha’, {

  chart: {

type: ‘column’

  }, 

  title: {

text: ”

  },

  xAxis: {

    type: ‘category’

  },

  yAxis: {

max: 100,

min:50,

title: {

        text: null

}

  },

  legend: {

enabled: false

  },

  plotOptions: {

    series: {

    borderWidth: 0,

      dataLabels: {

enabled: true,

format: ‘{point.y:.1f}%’

  }

}

  },

  tooltip: {

    headerFormat: ‘span style=”font-size:11px”/spanbr’,

pointFormat: ‘span style=”color:{green}”{point.name}/span: b符合率為{point.y:.2f}%/bbr/’

  },

  series: [

      {

  name: “Browsers”,

  colorByPoint:false ,

      data: genData(_data)

}

  ],

});

代碼比較簡單，看下注釋很好理解。

希望對你有幫助！

chartJs柱狀圖下滑條怎麼寫

!DOCTYPE html

html

head lang=”en”

meta charset=”UTF-8″

meta name=”viewport” content=”width=device-width, initial-scale=1.0″

title/title

link href=”css/bootstrap.min.css” rel=”stylesheet”

link href=”css/plugins/nouslider/nouislider.min.css” rel=”stylesheet”

/head

body

div class=”col-lg-6″

div class=”ibox float-e-margins col-lg-12″ style=”clear: both;”

div class=”ibox-title”

h5Bar Chart Example/h5

/div

div class=”ibox-content” style=”clear: both;”

div

canvas id=”barChart” height=”140″ style=”height: 300px;”/canvas

/div

/div

/div

div class=”col-lg-12″

div id=”drag-fixed” class=”slider_red”/div

/div

/div

script src=”js/jquery-2.1.1.js”/script

script src=”js/bootstrap.min.js”/script

!– NouSlider —

script src=”js/plugins/nouslider/nouislider.min.js”/script

script src=”js/plugins/chartJs/Chart.min.js”/script

script

//dataObj後台動態生成

var DataObj=[{“labels”:[“2014-5-6″,”2014-5-7″,”2014-5-8″,”2014-5-9″,”2014-5-10″,”2014-5-11″,”2014-5-12″],”data1″:[30,29,45,60,100,200,154],”data2”:[100,125,325,214,124,124,124]},

{“labels”:[“2015-6-6″,”2015-6-7″,”2015-6-8″,”2015-6-9″,”2015-6-10″,”2015-5-11″,”2015-6-12″],”data1″:[40,29,45,100,120,250,354],”data2”:[300,145,325,284,174,20,50]},

{“labels”:[“2016-6-6″,”2016-6-7″,”2016-6-8″,”2016-6-9″,”2016-6-10″,”2016-5-11″,”2016-6-12″],”data1″:[40,29,45,100,120,250,354],”data2”:[300,145,325,284,174,20,50]},

{“labels”:[“2017-6-6″,”2017-6-7″,”2017-6-8″,”2017-6-9″,”2017-6-10″,”2017-5-11″,”2017-6-12″],”data1″:[320,29,45,100,120,250,354],”data2”:[390,165,325,284,174,240,50]},

{“labels”:[“2014-5-6″,”2014-5-7″,”2014-5-8″,”2014-5-9″,”2014-5-10″,”2014-5-11″,”2014-5-12″],”data1″:[30,29,45,60,100,200,154],”data2”:[100,125,325,214,124,124,124]}];

// star繪製柱狀圖

var barData = {

labels: [],

datasets: [

{

label: “My First dataset”,

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

},

{

label: “My Second dataset”,

fillColor: “rgba(26,179,148,0.5)”,

strokeColor: “rgba(26,179,148,0.8)”,

highlightFill: “rgba(26,179,148,0.75)”,

highlightStroke: “rgba(26,179,148,1)”,

data: []

}

]

};

var barOptions = {

scaleBeginAtZero: true,

scaleShowGridLines: true,

scaleGridLineColor: “rgba(0,0,0,.05)”,

scaleGridLineWidth: 1,

barShowStroke: true,

barStrokeWidth: 2,

barValueSpacing: 5,

barDatasetSpacing: 1,

responsive: true

};

var ctx = document.getElementById(“barChart”).getContext(“2d”);

// 柱形圖初始值

$(function(){

barData.labels=DataObj[3].labels;

barData.datasets[0].data=DataObj[3].data1;

barData.datasets[1].data=DataObj[3].data2;

var myNewChart = new Chart(ctx).Bar(barData,barOptions);//加載更新圖表

});

var Slider = document.getElementById(‘drag-fixed’);

//end 結束繪製

// 開始滑動條

noUiSlider.create(Slider, {

start: 4,//滑動條開始出現的位置

connect: [true,false],

range: {

‘min’:0,//滑動條長度最小值

‘max’: 4 //滑動條長度最大值

},

step:1//步數

});

Slider.noUiSlider.on(‘slide’, function ( values, handle ) {

// $(“#test-data”).text(values[handle]);//得到滑條的值

// $(“#test-data”).text(this.get()); this.get() 得到滑條的值

var index=parseInt(this.get());

barData.labels=DataObj[index].labels;

barData.datasets[0].data=DataObj[index].data1;

barData.datasets[1].data=DataObj[index].data2;

var myNewChart = new Chart(ctx).Bar(barData, barOptions);

});

// 結束滑動條

/script

/body

/html

chart.js怎麼生成組合柱狀圖

告訴思路吧, 剩自摸索, 漲經驗, 漲姿勢啊~~~

php 讀取數據, 組織數據json格式, 由客戶端調用, 格式:

category: [“管理院”,’…..”]

data: [ [136,215], [147,196], …..]

客戶端, 先調用 Highcharts.chart 構造圖表, 設定基本型裝橫向組堆積圖

js通ajax加載數據, 數據設置圖標 category, series ;

chart.redraw 即.

具體先看 highcharts所sample, 比較合適, 直接照搬, 想辦修改數據即.

chart.js是一款基於HTML5 Canvas的圖表插件，chart.js的功能非常強大，它不僅提供了常見的柱形圖、折線圖、餅狀圖，而且還提供了環形圖、雷達圖，樣式外觀多樣，圖表的色彩搭配也比較清新。chart.js還有一個特點就是圖表在初始化的時候有彈性動畫特效，這也是HTML5 Canvas的一大功勞。