Posted in Javascript onMarch 14, 2015
在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图、饼状图、曲线图的都体现出来,即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重。Highcharts可以轻松实现三图合一的效果。
var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'area' }, title: { text: 'Historic and Estimated Worldwide Population Growth by Region' }, subtitle: { text: 'Source: Wikipedia.org' }, xAxis: { categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], tickmarkPlacement: 'on', title: { enabled: false } }, yAxis: { title: { text: 'Billions' }, labels: { formatter: function() { return this.value / 1000; } } }, tooltip: { formatter: function() { return ''+ this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' millions'; } }, plotOptions: { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } }, series: [{ name: 'Asia', data: [502, 635, 809, 947, 1402, 3634, 5268] }, { name: 'Africa', data: [106, 107, 111, 133, 221, 767, 1766] }, { name: 'Europe', data: [163, 203, 276, 408, 547, 729, 628] }, { name: 'America', data: [18, 31, 54, 156, 339, 818, 1201] }, { name: 'Oceania', data: [2, 2, 2, 6, 13, 30, 46] }] }); });
以上就是本文所述的全部内容了,希望对大家使用jQuery绘制柱状图饼状图曲线图能够有所帮助
jQuery.Highcharts.js绘制柱状图饼状图曲线图
- Author -
hebedich声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@