Question

我正在使用Highcharts和JQuery进行数据可视化应用。程序必须从数组中获取一些数据并创建另一个数组，使用空字段从..转换为...数据。这是我的代码：

<html>

<head>

  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>

</head>

<body>
<center>
    <form>
        <p>First value:</p>
        <input type="text" name="firstname" id="first">
        <br/>Last value:
        <br/>
        <input type="text" name="secondname" id="second">
        <br/>
        <input type="submit" id="btnSubmit" value="Submit" />
    </form>
</center>

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

<script>
    $(document).ready(function() {
        $('#btnSubmit').on("click", function() {

            var array = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

            var newArray = [];
            var firstVal = $('#first').val();
            var lastVal = $('#second').val();

            for (var i = 0; i < array.length; i++) {
                if (array[i] >= firstVal && array[i] <= lastVal) {
                    newArray.push(array[i]);
                }
         else {
newArray.push(null);
}
            }
 for (var i=0; i<newArray.length;i++) {
  $('#container').highcharts({
title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: [ ]
    },
    yAxis: {
        title: {
            text: 'Array_no'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: ' '
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'ArrayNo',
        data: newArray
    }, ]
});
};

  });

});
</script>
</body>
</html>

这样写的，程序有效，但是当我输入更大的数据时。例如，我使用更大的数组更改变量var array = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];：

var array = ${first};

包含超过40 000点，图表不会出现......如何解决？

如何使用Highcharts可视化数据？

0 个答案: