Highcharts JS问题 - 在jsfiddle中正常工作

时间:2015-01-19 17:28:02

标签: javascript highcharts

http://jsfiddle.net/1xgzmp1x/

这是使用Highcharts的子弹样式表。

当我将它复制到Dreamweaver时,我不能让它为我的生活工作。当我在浏览器中加载时,我得到一个空白页面。其他Highchart图表加载正常。

任何帮助?

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Highcharts Example</title>

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <style type="text/css">
    .body {
        font-family:helvetica, sans-serif;
        font-size:.7em;
    }
    .p {
        margin:.5em 1em;
    }
            </style>
            <script type+"text/javascript">
            Highcharts.Renderer.prototype.symbols.line = function (x, y, width, height) {
        return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
    };


    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar',
            borderWidth: 0,
            borderColor: '#eee',
            margin: [0, 0, 20, 100]
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        title: {
            text: ''
        },
        legend: {
            enabled: false
        },
        xAxis: {
            tickLength: 0,
            tickColor: '#eee',
            gridLineWidth: 0,
            gridLineColor: '#eee',
            labels: {
                style: {
                    fontWeight: 'bold'
                }
            },
            lineColor: '#eee',
            lineWidth: 0,
            categories: ['Measure 1', 'Measure 2', 'Measure 3', 'Measure 4', 'Measure 5']
        },
        yAxis: {
            tickInterval: 2,
            allowDecimals: false,
            tickColor: '#ccc',
            tickWidth: 0,
            tickLength: 3,
            lineColor: '#eee',
            lineWidth: 0,
            gridLineWidth: 0,
            gridLineColor: 'rgba(255,255,255,.15)',
            endOnTick: true,
            title: {
                text: ''
            },
            //gridZIndex:4,
            min: -0.5,
            max: 11.75,
            endOnTick: false,
            startOnTick: false,
            plotLines: [{
                value: 10.5,
                width: 0,
                color: '#eee'
            }],
            labels: {
                y: 10,
                style: {
                    fontSize: '10px'
                },
                formatter: function () {
                    if (this.value) {
                        return '$' + this.value + 'M';
                    } else {
                        return this.value;
                    }
                }
            }
        },
        tooltip: {
            enabled: true,
            backgroundColor: 'rgba(255, 255, 255, .85)',
            borderWidth: 0,
            shadow: true,
            style: {
                fontSize: '10px',
                padding: 2
            },
            formatter: function () {
                return this.series.name + ": <strong>" + "$" + Highcharts.numberFormat(this.y, 2) + "M" + "</strong>";
            }
        },
        plotOptions: {
            bar: {
                grouping: false,
                shadow: false,
                borderWidth: 0,
                pointPadding: .25,
                groupPadding: 0
            },
            scatter: {
                marker: {
                    symbol: 'line',
                    lineWidth: 3,
                    radius: 9,
                    lineColor: '#333'
                }
            }
        },
        series: [{
            name: 'Bands 3',
            enableMouseTracking: false,
            borderWidth: 0,
            borderRadius: 0,
            stacking: 'normal',
            grouping: false,
            color: 'rgba(156,156,156,.1)',
            data: [2, 1.5, 1.5, 1.5, 2]
        }, {
            name: 'Bands 2',
            enableMouseTracking: false,
            borderWidth: 0,
            borderRadius: 0,
            stacking: 'normal',
            grouping: false,
            color: 'rgba(156,156,156,.4)',
            data: [2, 1.5, 1.5, 2, 3]
        }, {
            //pointRange:1.1,
            name: 'Bands 1',
            enableMouseTracking: false,
            borderWidth: 0,
            borderRadius: 0,
            stacking: 'normal',
            grouping: false,
            color: 'rgba(156,156,156,.7)',
            data: [6, 7, 7, 6.5, 5]
        }, {
            name: 'Measure',
            color: 'rgba(56,56,56,1)',
            pointRange: .5,
            zIndex: 10,
            data: [7, 5, 9, 3, 6]
        }, {
            name: 'Target',
            type: 'scatter',
            zIndex: 20,
            data: [7.5, 8, 7.5, 8.5, 8.5]
        }]
    });
        </script>
        </head>
        <body>
    <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/highcharts-more.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>


    <div id="container" style="height:350px;width:400px;margin:1em;"></div>

        </body>
    </html>

0 个答案:

没有答案