使用HighCharts绘制bar形柱状图

需引入highcharts.js文件

Highcharts官方文档网址：http://www.highcharts.com/demo/

http://www.52wulian.org/highcharts_api/ （主要API）

http://www.highcharts.com/demo/?example=bar-basic&theme=grid （各种图形）

$(function() {

chart = new Highcharts.Chart({
chart: {
renderTo: 'comperuntype', ---id为 comperuntype 的 DIV--
defaultSeriesType: 'bar',
},
title: { ----------标题-------
text: '',
x: -20 //center
},
credits: { ---------副标题--------
enabled : true,
href : "#",
text : "不合格批次"
},
exporting :{ -----------导出-------------
enabled:true,
filename:"productinfo",
type:"image/png",
url:"http://export.highcharts.com",
width:800
},
xAxis: { //x轴标签
title: {
text: null,
},
categories: proNameArr, ------------数组格式--------
},
yAxis: { //y轴标签
min: 0, //最小值为0
tickInterval: 2.5, //自定义刻度
title: {
text: null,
},
labels: {
overflow: 'justify'
}

},
plotOptions: { //配置数据使其点显示信息
----------柱形图-----------
bar : {
dataLabels: {enabled: true},
enableMouseTracking: true
}
--------圆形图------------- chart.series[0].setData(unquNameArr); //圆形图数据也是数组类型，可这样添加
pie: {
size:'80%',
borderWidth: 0,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000',
connectorColor: '#999', //设置数据域扇形区的连接线的颜色
//distance: -32,//通过设置这个属性，将每个小饼图的显示名称和每个饼图重叠
style: {
fontSize: '12px',
},
formatter: function(index) {
return '<span style="color:black;>' + this.point.name +Highcharts.numberFormat(this.percentage, 2) + ' %';
}
},
},
series: [{
name: '批次',
data: proCountArr -----------数组格式-------
}]

});
--------------------数据可从后台取得---------------------------------
<c:forEach items="${list}" var="dft">
proNameArr.push('${dft.industryName}');
proCountArr.push(${dft.orders});
</c:forEach>
<c:forEach items="${unquaList}" var="un">
<c:if test="${un.parentId==1}">
unquNameArr.push(['${un.unName}',${un.orders/totalItemOrders*100}]);
</c:if>
</c:forEach>

使用HighCharts绘制bar形柱状图相关推荐

MATLAB绘制堆叠形柱状图
% 论文中常用的三种柱状图,堆叠形相对有些高级感,SCI常用一般情况 y =[1,2,3;4,5,6;7,8,9] bar(y) 水平情况 y =[1,2,3;4,5,6;7,8,9] barh(y ...
数据可视化--绘制百分比堆积柱状图、簇形柱状图、并列子图
一.绘制簇形柱状图 '''列索引"month"会被自动设置为x轴的标题.用于指定y轴的列索引们会自动生成对应的图例,以及x轴刻度会自动旋转90度'''data.plot.bar(& ...
#18 可视化基础4-簇形柱状图、百分比堆积柱状图、并列子图
目录簇形柱状图「不指定x轴和y轴数据」 plot.bar() 「不指定x轴和y轴数据」 plot.bar("指定为x轴的columns",["指定为y轴的column ...
python plt绘制柱状图形+柱状图增加数字标注
python绘制柱状图形+柱状图增加数字标注 data = pd.Series([4, 5, 6], index=['A','B','C']) fig = plt.figure(figsize=(7, ...
Python使用matplotlib绘制分组对比柱状图（bar plot）可视化时汉语（中文）标签显示成了框框□□、什么情况、我们有解决方案
Python使用matplotlib绘制分组对比柱状图可视化时(bar plot)汉语(中文)标签显示成了框框□□.什么情况.我们有解决方案目录
Matlab：绘制不同颜色的柱状图bar
绘制单列柱状图bar 1.当有多个图片的时候需要用figure函数来分别显示: figure(1) imshow(img_test); figure(2) bar(n,m) 2.对bar进行不同颜色的 ...
用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（上）
首先介绍一下什么是g.raphael.这个又要说到什么是raphael.js.raphael是一个javascript库,可以用来跨浏览器绘制各种图形,只要是你想得到的图形都可以用raphael绘制出 ...
【Python】用 Highcharts 绘制饼图，也很强大
来源:Python数据之道作者:Peter 整理:阳哥用 Highcharts 绘制饼图,也很强大前不久,分享了读者投稿的文章,较为综合的介绍了可视化库 Highcharts ,这个一个 Jav ...
肝！用 Highcharts 绘制饼图，也很强大
来源 / Python数据之道作者/Peter 整理/阳哥用 Highcharts 绘制饼图,也很强大前不久,分享了读者投稿的文章,较为综合的介绍了可视化库 Highcharts ,这个一个 ...

使用HighCharts绘制bar形柱状图

需引入highcharts.js文件

http://www.52wulian.org/highcharts_api/ （主要API）

http://www.highcharts.com/demo/?example=bar-basic&theme=grid （各种图形）

$(function() {

使用HighCharts绘制bar形柱状图相关推荐

最新文章

热门文章