如何从highstock向xaxis添加基线高图的导航器

时间:2014-09-19 12:02:35

标签: javascript jquery html css highcharts

我有趋势线和点的基线高图..现在我想在单线系列highstock中添加xaxis的范围......

This is Jsfiddle please observe  :

http://jsfiddle.net/hj22wbe5/7/

这是Highstock:

http://www.highcharts.com/stock/demo

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/

如何为第一个jsfiddle图形添加导航器,该图形具有highstock ..

请帮助

谢谢!

编辑代码:

<!DOCTYPE html>

<html lang="en">

<title>RNA</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<meta http-equiv='X-UA-Compatible' content='IE=Edge'/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="http://code.highcharts.com/stock/highstock.js"></script>

<script src="http://code.highcharts.com/modules/exporting.js"></script>
<body>

<div id="container" style="height: 400px"></div>

</body>

<script type="text/javscript">
$(function () {
    var sourceData = [
        [0, 99.43],
        [1, 99.40],
        [2, 99.24],
        [3, 99.40],
        [4, 99.21],
        [5, 99.45],
        [6, 99.41],
        [7, 99.18],
        [8, 99.36],
        [9, 99.31],
        [10, 99.38],
        [11, 99.20],
        [12, 99.38],
        [13, 99.32]
    ];
    var dates = ['18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '19-Jul-14', '20-Jul-14', '20-Jul-14'];
    $('#container').highcharts({
        title: {
            text: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
            x: -20 //center
        },
        tooltip: {
            formatter: function () {
                if (this.series.name == 'Series 2') {
                    return false;
                }
                //console.log(this.point.extprop);
                var s = 'The value for <b>' + this.x +
                    '</b> is <b>' + this.y + '</b>';
                if (this.point.extprop) {
                    s += 'for <b>' + this.point.extprop + '</b>';
                }
                return s;
            }
        },
        subtitle: {
            text: '',
            x: -20
        },
        navigator: {
            enabled: true
        },
        xAxis: {
            labels: {
                rotation: 90,
                align: "left",
                formatter: function () {
                    return dates[this.value];
                },
            },
            tickInterval: 1
        },
        yAxis: {
            title: {
                text: 'Percent'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            layout: 'vertical',
            //align: 'right',
            //verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'RNA',
            data: [{
                x: 0,
                y: 99.43,
                extprop: 'power issue'
            }, {
                x: 1,
                y: 99.40,
                extprop: 'flood'
            }, {
                x: 2,
                y: 99.24,
                color: 'red',
                extprop: 'power issue'
            }, {
                x: 3,
                y: 99.40,
                extprop: 'flood'
            }, {
                x: 4,
                y: 99.21,
                color: 'red',
                extprop: 'power issue'
            }, {
                x: 5,
                y: 98.45,
                color: 'red',
                extprop: 'flood'
            }, {
                x: 6,
                y: 98.41,
                color: 'red',
                extprop: 'power issue'
            }, {
                x: 7,
                y: 99.18,
                color: 'red',
                extprop: 'flood'
            }, {
                x: 8,
                y: 99.36,
                extprop: 'power issue'
            }, {
                x: 9,
                y: 99.31,
                color: 'red',
                extprop: 'flood'
            }, {
                x: 10,
                y: 99.38,
                extprop: 'power issue'
            }, {
                x: 11,
                y: 99.20,
                color: 'red',
                extprop: 'flood'
            }, {
                x: 12,
                y: 99.38,
                extprop: 'power issue'
            }, {
                x: 13,
                y: 99.32,
                extprop: 'flood'
            }]
        }, {
            type: 'line',
            marker: {
                enabled: false
            },
            /* function returns data for trend-line */
            data: (function () {
                return fitData(sourceData).data;
            })()
        }],
        credits: {
            enabled: false
        }
    });

});

</script>

</html>

是的,这是脚本和一个问题,当我在浏览器中加载图表没有显示,当我检查元素没有错误那里..我无法找到问题..在浏览器中显示空白页面.. @ pawel。 感谢

0 个答案:

没有答案