Question

我试图从HighChart网站上给出的示例中绘制高图表。

我正在尝试的代码如下，

<html>
  <head>
    <title>
      Chart
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
    <script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            // Create the chart
            $('#container').highcharts('StockChart', {
                chart: {
                    events: {
                        load: function () {

                            // set up the updating of the chart each second
                            var series = this.series[0];
                            setInterval(function () {
                                var x = (new Date()).getTime(), // current time
                                y = Math.round(Math.random() * 100);
                                series.addPoint([x, y], true, true);
                            }, 1000);
                        }
                    }
                },

                rangeSelector: {
                    buttons: [{
                        count: 1,
                        type: 'minute',
                        text: '1M'
                    }, {
                        count: 5,
                        type: 'minute',
                        text: '5M'
                    }, {
                        type: 'all',
                        text: 'All'
                    }],
                    inputEnabled: false,
                    selected: 0
                },

                title: {
                    text: 'Live random data'
                },

                exporting: {
                    enabled: false
                },

                series: [{
                    name: 'Random data',
                    data: (function () {
                        // generate an array of random data
                        var data = [], time = (new Date()).getTime(), i;

                        for (i = -999; i <= 0; i++) {
                            data.push([
                                time + i * 1000,
                                Math.round(Math.random() * 100)
                            ]);
                        }
                        return data;
                    })()
                }]
            });

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

遗憾的是谷歌浏览器中没有任何内容。

错误代码：0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method

Answer 1

关于highcharts的一个小例子

 <script src="http://code.highcharts.com/highcharts.js"></script>
 <div id="container" style="height: 300px"></div>
 <button id="update">Update chart</button>


$(function () {
var cat=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
$('#container').highcharts({

    chart: {
        animation: false
    },

    xAxis: {
        categories: cat
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

});

i = 1;
$('#update').click(function () {
    var chart = $('#container').highcharts();
    chart.series[0].data[0].update(i++ % 2 ? 200 : 0);
});
});

Answer 2

我在引用jquery文件时犯了一些错误。我按顺序制作它，它的工作非常好......

图表

      <!--  <script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
      <script type="text/javascript" src="js/exporting.js"></script>
      <script type="text/javascript" src="jquery/highcharts.js"></script>
      <script type="text/javascript" src="jquery/jquery.min.js"></script> !-->

    <script type="text/javascript">
        $(function () {

            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            // Create the chart
            $('#container').highcharts('StockChart', {
                chart: {
                    events: {
                        load: function () {

                            // set up the updating of the chart each second
                            var series = this.series[0];
                            setInterval(function () {
                                var x = (new Date()).getTime(), // current time
                                y = Math.round(Math.random() * 100);
                                series.addPoint([x, y], true, true);
                            }, 1000);
                        }
                    }
                },

                rangeSelector: {
                    buttons: [{
                        count: 1,
                        type: 'minute',
                        text: '1M'
                    }, {
                        count: 5,
                        type: 'minute',
                        text: '5M'
                    }, {
                        type: 'all',
                        text: 'All'
                    }],
                    inputEnabled: false,
                    selected: 0
                },

                title: {
                    text: 'Live random data'
                },

                exporting: {
                    enabled: false
                },

                series: [{
                    name: 'Random data',
                    data: (function () {
                        // generate an array of random data
                        var data = [], time = (new Date()).getTime(), i;

                        for (i = -999; i <= 0; i++) {
                            data.push([
                                time + i * 1000,
                                Math.round(Math.random() * 100)
                            ]);
                        }
                        return data;
                    })()
                }]
            });

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

动态高亮显示不显示

2 个答案: