如何将js数组连接到highcharts

时间:2015-05-30 02:59:48

标签: javascript html highcharts

我是Java Script的新手,而Highcharts有一个问题,可能是基本的,但无法在互联网上找到答案。基本上,我想将用户生成的数据连接到高图,问题是如何完成链接

说我有一个生成一些值的代码,如:

<!DOCTYPE html>
<html>
<body>

Diameter: <input type="number" id="TreeDiameter" value="">
<button onclick="myFunction()">Calculate</button>
<p id="demo"></p>

<script>
function myFunction() {
var Results="";
var TreeDiameter = document.getElementById("TreeDiameter").value;
  for (i = 1; i <=20; i++) {
  r = i  + TreeDiameter;
  Results += r + ",";
}
document.getElementById("demo").innerHTML = RESULTS;
}
</script>
<html>
<body>

我希望将这些值绘制在Highchart中,如下所示:

<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>

    <body>

<div id="container" style="width:50%; height:400px;"></div>



<script> 
$(function () {
    $('#container').highcharts({
        chart: {
        type: 'scatter',
        zoomType: 'x'
            },
        title: {
        text: 'CO2 stored by your tree'
        },

            xAxis: {
            type: 'datetime',
            minRange: 365 * 24 * 3600000 // fourteen days
        },
        yAxis: {
        title: {
                text: 'CO2 sequestered (kg)'
            }
        },
        legend: {
        enabled: false
    },
    plotOptions: {
        area: {
            fillColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity    (0).get('rgba')]
                ]
            },
            marker: {
                radius: 2
            },
            lineWidth: 1,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
            threshold: null
        }
    },

    series: [{
        type: 'area',
        name: 'Cummulative CO2 stored',
        pointInterval: 365 * 24 * 3600000,
        pointStart: Date.UTC(2015, 0, 1),
        data: [RESULTS]
    }]
});
});

</script>



    </body>
</html>

</body>
</html>

基本上,第一个代码中的“结果”是在第二个代码中绘制的。如果可能的话,我想将这两个代码保存在一个页面中。感谢。

1 个答案:

答案 0 :(得分:2)

试试这个,你可以根据for循环次数或迭代次数来改变setTimeout函数的时间间隔。

 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
       if (indexPath.row == 2 || indexPath.row == 5) {
                      // here button creation code
                     }
             }