网站首页
百度ECharts
ECharts实例
ECharts入门
地图大全
ECharts官网
源代码:
点击运行 》
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Highcharts 实例</title> <script src="/js/jquery-1.9.0.min.js"></script> <!-- 引入 highcharts.js --> <script src="/js/highcharts.js"></script> </head> <body> <div id="myChart" width='100%' height='450'></div> <script type="text/javascript"> $(document).ready(function() { var chart = { type: 'column' }; var title = { text: '堆叠柱形图' }; var xAxis = { categories: ['周一','周二','周三','周四','周五','周六','周日'] }; var yAxis ={ min: 0, title: { text: '总访问量' }, stackLabels: { enabled: true } }; var legend = { align: 'right', x: -30, verticalAlign: 'top', y: 25, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }; var plotOptions = { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', style: { textShadow: '0 0 3px black' } } } }; var credits = { enabled: false }; var series= [{ name: '中国', data: [49, 71, 106, 129, 144, 176, 200] }, { name: '美国', data: [83, 78, 98, 93, 106, 84, 105] }]; var json = {}; json.chart = chart; json.title = title; json.xAxis = xAxis; json.yAxis = yAxis; json.legend = legend; json.plotOptions = plotOptions; json.credits = credits; json.series = series; $('#myChart').highcharts(json); }); </script> </body> </html>
运行结果: