HighCharts之2D折线图

jopen 7年前

HighCharts之2D折线图

 

1、HighCharts之2D折线图源码

line.html

    <!DOCTYPE html>        <html>        <head>        <meta charset="UTF-8">        <title>HighCharts 2D折线图</title>        <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>        <script type="text/javascript" src="../scripts/js/highcharts.js"></script>        <!-- <script type="text/javascript" src="../scripts/js/modules/exporting.js"></script> -->        <script type="text/javascript">             $(function(){                 $('#lineChart').highcharts({                     chart: {                         type: 'line'                     },                     title: {                         text: '2013年月收入'                     },                     subtitle: {                         text: '月收入'                     },                     xAxis: {                         categories: [                             '一月',                             '二月',                             '三月',                             '四月',                             '五月',                             '六月',                             '七月',                             '八月',                             '九月',                             '十月',                             '十一月',                             '十二月'                         ]                     },                     yAxis: {                         min: 0,                         title: {                             text: '收入 (¥)'                         }                     },                     tooltip: {                         headerFormat: '<span style="font-size:20px">{point.key}</span><table>',                         pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +                             '<td style="padding:0"><b>{point.y:.1f} 元</b></td></tr>',                         footerFormat: '</table>',                         shared: true,                         useHTML: true                     },                     plotOptions: {                         column: {                             pointPadding: 0.2,                             borderWidth: 0                         }                     },                     series: [{                         name: '张三',                         data: [4995, 7169, 1064, 7292, 2440, 4545, 6545, 9564, 1245, 4512, 6523, 4514]                                  }, {                         name: '李思',                         data: [8361, 2354, 4512, 2356, 4515, 6451, 9865, 5455, 8254, 6562, 6945, 2356]                                  }, {                         name: '王武',                         data: [4512, 9565, 6564, 2652, 3265, 1202, 7845, 9845, 2356, 7844, 5424, 6312]                                  }, {                         name: '赵六',                         data: [6523, 8956, 6531, 6532, 9864, 4552, 9564, 7845, 6523, 4512, 8956, 2356]                                  }]                 });             });        </script>        </head>        <body>           <div id="lineChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>        </body>        </html>  
</div> </div>
2、运行结果 20140318215344453.png