var chart; $(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'chart_combo' //关联页面元素div#id }, title: { //图表标题 text: '2011年东北三大城市水果消费量统计图' }, xAxis: { //x轴 categories: ['柑橘', '香蕉','苹果', '梨子'], //X轴类别 labels:{y:18} //x轴标签位置:距X轴下方18像素 }, yAxis: { //y轴 title: {text: '消费量(万吨)'}, //y轴标题 lineWidth: 2 //基线宽度 }, tooltip: { formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框 var s; if (this.point.name) { // 饼状图 s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '万吨(' + twoDecimal(this.percentage) + '%)'; } else { s = '' + this.x + ': ' + this.y + '万吨'; } return s; } }, labels: { //图表标签 items: [{ html: '水果消费总量对比', style: { left: '48px', top: '8px' } }] }, exporting: { enabled: false //设置导出按钮不可用 }, credits: { text: 'helloweba.com', href: 'http://www.helloweba.com' }, series: [{ //数据列 type: 'column', name: '长春', data: [8.4, 9.8, 11.4, 15.6] }, { type: 'column', name: '沈阳', data: [9.2, 7.8, 10.2, 16.8] }, { type: 'column', name: '哈尔滨', data: [6.5, 9.4, 13.2, 18.6] }, { type: 'spline', name: '平均值', data: [8.03, 9, 11.6, 17] }, { type: 'pie', //饼状图 name: '水果消费总量', data: [{ name: '长春', y: 45.2, color: '#4572A7' }, { name: '沈阳', y: 44, color: '#AA4643' }, { name: '哈尔滨', y: 47.7, color: '#89A54E' }], center: [100, 80], //饼状图坐标 size: 100, //饼状图直径大小 dataLabels: { enabled: false //不显示饼状图数据标签 } }] }); });
由此可见:原来形状是由series: 下的 type: 值决定。
效果如下:
相关推荐
js画饼状图 柱状图 曲线图,实现中文描述,自定义模块名称,用Highcharts实现饼状图 柱状图 曲线图,可参开Highcharts开发文档
Highcharts柱状图显示,柱状图显示颜色不一样
解决highcharts多级下钻问题,下钻过程中使用了多种图例,自带上钻功能 c#,java使用方法一样,demo中使用c#方法实现 vs打开直接可以运行无需连接数据库 大数据可使用异步下钻...
做数据的图标显示,适合用highcharts.js插件来实现,可以做曲线图、柱状图、面积图等
利用highCharts绘制饼图和柱状图
highcharts柱状图
NULL 博文链接:https://747017186.iteye.com/blog/2071305
highcharts表格制作柱状图的Demo。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
NULL 博文链接:https://xuedong.iteye.com/blog/1138870
使用Highcharts实现的图形报表,各种柱形对比图,柱形级别图,单一柱形图,各种功能。
在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图、饼状图、曲线图的都体现出来,即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重。Highcharts可以...
highcharts 动态生成柱状图,曲线图,仪表盘图,调用totalReport方法,传入要生成图表的类型 和数据参数 标题等 可以自动生成图
Java和Highcharts结合实现折线图
实现一个柱状图,这个柱状图的高度在不停的刷新,效果如下: 官网是没有动态刷新的示例的,由于需要我查看了其源码,并根据之前示例做出了动态柱状图的效果,希望对同学们有用! 看一下代码: <%@ page ...
在theme中包含四种js是四种颜色样式,defaultSeriesType:为图表类型属性,主要包含8种,分别为 line折线图, spline曲线图, area填充图, areaspline平滑填充图, column柱状图, bar倒柱状图, pie饼状图 , scatter点位...
使用highcharts实现饼图和曲线图的展示
highCharts 柱状图,线型和柱状,仪表, 内有仪表,如果没有请举报。
该项目主要是使用.NET MVC 和Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图,让数据更加的明显美观,可以满足绝多数数据报表的需求!
NULL 博文链接:https://xurichusheng.iteye.com/blog/2176892