<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/exporting.js"></script> <script> $(function () { $(\'#container\').highcharts({ chart:{ type:\'column\' }, xAxis: { categories: [\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\', \'Jun\'] }, yAxis: { title: { text: \'Temperature (°C)\' }, plotLines: [{ value: 0, width: 1, color: \'#808080\' }] }, tooltip: { formatter:function(){ return \'<b>\'+this.x + \'</b><br/>\' + this.series.name + \':\' + this.y + \'<br/>\' + \'Total:\' + this.point.stackTotal; }, valueSuffix: \'°C\' }, plotOptions: { column: { stacking: \'normal\', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || \'white\' } } }, legend: { layout: \'vertical\', align: \'right\', verticalAlign: \'middle\', borderWidth: 0 }, series: [{ name: \'Tokyo\', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5] }, { name: \'New York\', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0] }, { name: \'Berlin\', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0] }] }); }); </script> </head> <body> <div id="container" style="min-width:700px;height:400px"></div> </body> </html>
相关文章:
- echarts柱图自定义为硬币堆叠的形式 2022-01-05
- 37Echarts - 柱状图(极坐标系下的堆叠柱状图) 2021-08-12
- 柱形图和堆积图组合 2021-07-12
- Highcharts 带空值(null)和0的3D柱形图 2021-07-14
- echars 柱状图 堆叠状态 --》二次封装 2021-08-27
- highcharts柱状图+折线图 2022-01-03
- echarts堆叠柱状图在最上面的柱子显示总和 2021-07-16
- 如何用 highcharts 画柱状图, 多柱子叠加, 提示框, 以及柱子高度标识 2021-05-23