Question

我做了一张图表，一般来说效果很好。

如果我在MAC OX上使用safari打开我的.html文件，它运行良好。

如果我使用Internet Explorer打开文件，则不会显示任何图表。我现在启动调试模式，我在highchairs.js第167行看到了一个例外：

（我想上传一张这样的图片，但它说我需要至少10个声明来发布图片）。

＆＃34; _legendItemPos，＆＃34; ＆＃34; E = d [0]＆＃34; ist标记，它说：财产＆＃34; 0＆＃34;未定义或零引用无法调用

我的.html文件看起来像这样，有3个名为的JSON文件：Daten1，Daten2，Daten3

!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        <script type="text/javascript" src="Highcharts\exporting-server\phantomjs\jquery.1.9.1.min.js"></script>
        var fullPath = document.getElementById('upload').value;
            if (fullPath) {
                var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
                var filename = fullPath.substring(startIndex);
                    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
                        filename = filename.substring(1);
                    }
                alert(filename);
            }

        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    zoomType: 'xy',
                    resetZoomButton: {
                        position: {
                            align: 'right',
                            verticalAlign: 'top',
                            x: 0,
                            y: -30
                        }
                    }
                },
                title: {
                    text: 'Testgraph',
                    x: -20 //center
                },
                subtitle: {
                    text: '3 Datensätze mit 3 Y-Achsen',
                    x: -20
                },
                xAxis: {
                    lineWidth: 1,
                    //lineColor: Highcharts.getOptions().colors[1],
                    gridLineWidth: 1,
                    //gridLineColor: Highcharts.getOptions().colors[1],
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        day: '%e of %b'
                    },
                    tickPixelInterval: 150,
                    maxZoom: 60000,
                    title: {
                        text: 'Zeit',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    }
                },
                yAxis: [{
                    lineWidth: 0,
                    lineColor: Highcharts.getOptions().colors[1],
                    //minorGridlineColor: Highcharts.getOptions().colors[1],
                    //gridlineColor: Highcharts.getOptions().colors[1],
                    minorTickInterval: 5,
                    labels:{
                        format: '{value}°C',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    },
                    title: {
                        text: 'Temperatur',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    },
                    minPadding: 0.02,
                    maxPadding: 0.02
                },
                {
                    //gridlineColor: Highcharts.getOptions().colors[1],
                    //minorGridlineColor: Highcharts.getOptions().colors[1],
                    minorTickInterval: 5,
                    gridLineWidth: 1,
                    labels:{
                        format: '{value}ml',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    },
                    title: {
                        text: 'Volumen',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    },
                    minPadding: 0.02,
                    maxPadding: 0.02
                },
                {
                    //gridlineColor: Highcharts.getOptions().colors[1],
                    //minorGridlineColor: Highcharts.getOptions().colors[1],
                    minorTickInterval: 50,
                    labels:{
                        format: '{value}mbar',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    },
                    title: {
                        text: 'Druck',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    },
                    minPadding: 0.02,
                    maxPadding: 0.02
                }],

                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2)+
                        this.series.tooltipOptions.valuePrefix;
                    }
                },
                plotOptions: {
                    line: {
                        marker: {
                        enabled: false
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'center',
                    layout: 'horizontal',
                    borderWidth: 1
                },
                series: [{
                    name: 'Temperatur',
                    data: [],
                    tooltip: {
                        valuePrefix: '°C'
                    },
                    color: Highcharts.getOptions().colors[0]
                },
                {
                    name: 'Volumen',
                    yAxis:1,
                    data: [],
                    tooltip: {
                        valuePrefix: 'ml'
                    },
                    color: Highcharts.getOptions().colors[3]
                },
                {
                    name: 'Druck',
                    yAxis:2,
                    data: [],
                    tooltip: {
                        valuePrefix: 'mbar'
                    },
                    color: Highcharts.getOptions().colors[2]
                }
                ]
            }

            $.getJSON("Daten1.json", function(json) {
                options.series[0].data = json;
                chart = new Highcharts.Chart(options);
            });
            $.getJSON("Daten2.json", function(json) {
                options.series[1].data = json;
                chart = new Highcharts.Chart(options);
            });
            $.getJSON("Daten3.json", function(json) {
                options.series[2].data = json;
                chart = new Highcharts.Chart(options);
            });
        });
        </script>
        <script src="Highcharts\js\highcharts.js"></script>

    </head>
    <body>
        <div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>
    </body>
</html>

我不知道什么是不正确的。我有最新的Highcharts版本。

任何提示都会有所帮助。感谢您的帮助，Patrick

Answer 1

IE / Chrome / FF不会在本地调用ajax。因此，您需要设置自己的网络服务器并运行代码。

highcharts.js第167行中的例外情况

1 个答案: