標籤：style blog http color java io 資料 for
整理一份完整的例子，以供參考：
<1>頁面chart.html：
<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>highchart折線圖</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script src="highcharts.js"></script> <script type="text/javascript"> var xset = [];//X軸資料集 var yset = [];//Y軸資料集 /*返回資料*/ function getData(){ $.getJSON(‘com/ChartServlet‘,function(data){ $.each(data,function(i,item){ $.each(item,function(k,v){ xset.push(k); yset.push(v); }); }) console.log(xset); console.log(yset); //根據時間序列產生折線圖 showChart(xset,yset); }); } /*定義圖表*/ function showChart(xset,yset){ var chart = new Highcharts.Chart({ chart: { renderTo: ‘linecontainer‘, type: ‘line‘, marginRight: 130, marginBottom: 25 }, xAxis: { categories: xset }, yAxis: { title: { text: ‘資料‘ }, plotLines: [{ value: 0, width: 1, color: ‘#808080‘ }] }, tooltip: { formatter: function() { return ‘<b>‘+ this.series.name +‘</b><br/>‘+ this.x +‘: ‘+ this.y; } }, legend: { layout: ‘vertical‘, align: ‘right‘, verticalAlign: ‘top‘, x: -10, y: 100, borderWidth: 0 }, series: [{ name: ‘隨機時間序列‘, data: yset }] }); } //執行 getData(); </script> </head> <body> <!-- 圖表顯示區 --> <div id="linecontainer" style="width: 1200px; height: 300px"></div> </body> </html></span>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
