highcharts 一个页面动态绘制多个图

Question

求解！！我想每遍历完一组输出一个图  循环有点问题   每次只能遍历完就会覆盖上一次图最后只剩下最后一组的折线图 ，求教如何让能遍历多少组数据就产生多少个折线图
<div id="container" style ="min-width:400px ,height:400px "></div>
<script>
var data ={
    "CF509" : [5000,4800,4900,5100,4600,4780],
    "CF506" : [5200,4500,4600,5400,4300,4680],
    "CF609" : [5400,4700,4500,4800,4500,4980]
}
$(function () {
    for(var temp in data)
        $('#container').highcharts({
            title: {
                text: '对数折线图'
            },
            xAxis: {
                tickInterval: 1
            },
            yAxis: {
                type: 'logarithmic',
                minorTickInterval: 0.1
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br />',
                pointFormat: 'x = {point.x}, y = {point.y}'
            },
            series: [{
                name:temp,
                data: data[temp],
                pointStart: 1
            }]
        });
});
</script>

Answer 1

series: [{
                name:temp,
                data: data[temp],
                pointStart: 1
            },{
                name:temp,
                data: data[temp],
                pointStart: 1
            },{
                name:temp,
                data: data[temp],
                pointStart: 1
            }]
series ,设置三个就ok了

Answer 2

$('#container').highcharts你在循环里这样去不就是每次都往container这个div里画图吗？要多个图表就用多个div

Answer 3

多个series不行那只是实现多个折线     不是多张图     我想过多个div   但是我获取到后台的数据不止3组  我说定义了三组来测试的    怎么能动态的循环container呢  遍历一组一个container那种

Answer 4

<div id="container"></div>
<script>
var data ={
    "CF509" : [5000,4800,4900,5100,4600,4780],
    "CF506" : [5200,4500,4600,5400,4300,4680],
    "CF609" : [5400,4700,4500,4800,4500,4980]
}
$(function () {
    for(var temp in data){
        var div = $('<div style="min-width:400px ,height:400px"></div>');
        $('#container').append(div);
        div.highcharts({
            title: {
                text: '对数折线图'
            },
            xAxis: {
                tickInterval: 1
            },
            yAxis: {
                type: 'logarithmic',
                minorTickInterval: 0.1
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br />',
                pointFormat: 'x = {point.x}, y = {point.y}'
            },
            series: [{
                name:temp,
                data: data[temp],
                pointStart: 1
            }]
        }
    });
});
</script>

Answer 5

我无意中发现 data-highcharts-chart 的值填不一样就可以了 , 楼主可以试一下