HighCharts 圖表外掛程式自訂綁定時間軸資料

最後更新：2014-03-10 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

HighCharts 圖表外掛程式自訂綁定時間軸資料 HighCharts 圖表外掛程式自訂綁定時間軸資料，解決時間軸自動顯示資料與實際綁定資料時間不對應問題！學習樣本如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>喊單收益曲線圖</title>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>    <script src="highcharts.js" type="text/javascript"></script>    <script src="exporting.js" type="text/javascript"></script></head><body style="margin: auto;">    <!-- 喊單收益曲線圖 -->    <div id="container" style="width: 100%; height: 100%; margin: 0 auto">    </div></body></html><script type="text/javascript" language="javascript">    /*    * 官方文檔： http://www.highcharts.me/    */    var chart, myTime = "", myData = "";    $(function () {        //盈利率        myData = "[-20.25,-12.30,-3.68,5.45,19.00,-2.78,-5.45,9.80,10.45,16.15]";        options.series[0].data = eval(myData);        //時間        myTime = "['2014-03-01 01:10','2014-03-01 01:30','2014-03-01 01:45','2014-03-01 02:30','2014-03-01 02:45','2014-03-01 03:00','2014-03-01 03:40','2014-03-01 04:50','2014-03-01 05:05','2014-03-01 06:06']";        options.xAxis.categories = eval(myTime);        //載入圖表        chart = new Highcharts.Chart(options);    });    var options = {        chart: {            renderTo: 'container',            zoomType: 'x'        },        title: {            text: '喊單收益曲線圖'        },        subtitle: {            text: '點擊並拖動繪圖區域的放大'        },        xAxis: {            title: {                text: null            },            labels: {                formatter: function () {                    return this.value;                }            }        },        yAxis: {            title: {                text: '盈利率'            },            labels: {                formatter: function () {                    return this.value + "%";                }            },            startOnTick: false,            showFirstLabel: false        },        tooltip: {            formatter: function () {                return '' + '日期：' + this.x                          + '<br/>盈利率：' + Highcharts.numberFormat(this.y, 2) + "%";            }        },        legend: {            enabled: false        },        plotOptions: {            area: {                fillColor: {                    linearGradient: [0, 0, 0, 300],                    stops: [[0, '#4572A7'],    [1, 'rgba(2,0,0,0)']   ]                },                lineWidth: 1,                marker: {                    enabled: false,                    states: {                        hover: {                            enabled: true,                            radius: 5                        }                    }                },                shadow: false,                states: {                    hover: {                        lineWidth: 1                    }                }            }        },        series: [{            type: 'area',            name: '盈利率'        }]    }</script>

如下：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More