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的一大功劳。