highstock 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highstock Example</title>
 
        <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">
$(function () {
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function (data) {
 
        // create the chart
        $('#container').highcharts('StockChart', {
 
 
            rangeSelector : {
                selected : 1
            },
 
            title : {
                text : 'AAPL Stock Price'
            },
            navigator: {
            enabled: false
        },
        scrollbar: {
            enabled: false
        },
        rangeSelector: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        chart: {
            height: 700,
            backgroundColor: '#000',
            borderWidth: 5,
 
        },
        yAxis: {
            gridLineWidth: 0
        },
        plotOptions: {
            candlestick: {
                color: 'green',
                lineColor:'green',
                upColor: 'red',
                upLineColor:'red'
 
 
 
            }
        },
 
            series : [{
                type : 'candlestick',
                name : 'AAPL Stock Price',
                data : data,
                dataGrouping : {
                    units : [
                        [
                            'week', // unit name
                            [12] // allowed multiples
                        ], [
                            'month',
                            [1, 2, 3, 4, 6]
                        ]
                    ]
                }
            }]
        });
    });
});
 
        </script>
    </head>
    <body>
<script src="http://cdn.hcharts.cn/highstock/highstock.js"></script>
<script src="http://cdn.hcharts.cn/highstock/modules/exporting.js"></script>
 
<div id="container" style="height: 400px; min-width: 310px"></div>
    </body>
</html>

 

posted @ 2016-05-14 23:01  Ali.Blacken  阅读(158)  评论(0)    收藏  举报