本文目录一览：
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.length > 0) {
for(var i=0; i < data.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"></span><br>',
pointFormat: '<span style="color:{green}">{point.name}</span>: <b>符合率为{point.y:.2f}%</b><br/>'
},
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">
<h5>Bar 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>
<div class="col-lg-12">
<div id="drag-fixed" class="slider_red"></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的一大功劳。
