动态创建的高图未显示条形图/线条

Question

我在使用Highcharts库制作的程序中显示了一些数据。两个几乎相同的代码片段给出了非常不同的结果（第一个，有2行，没有显示任何东西，第二个，有1行，显示我期望的）。为了确保我在图表的配置中没有做错任何事情，我复制了以下代码from the highcharts website并将其完全保留原样，但它会产生意外结果：

var chartinfo = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
}

$("#" + graphid).highcharts(chartinfo);

这将生成以下图表：

如您所见（单击图像放大），它具有预期的比例（0 - 7.5，范围是0-7）。我在highcharts.src.js（v3.0.1）的第14503行放了一个断点（使用Chrome），这是drawTracker函数的开头。

drawTracker调用正确显示的图形（显然），但不会调用上面的图形。因此，在确定或执行比例的点与实际绘图之间出现问题。

对此问题的任何见解将不胜感激。

修改

看起来这只发生在页面上的第一个图表中。当我切换它们（方法调用）时，第一个不显示该行，第二个显示条形（上面的代码）。所以我想知道的是为什么第一张图没有显示它的内容而第二张确实显示了它的内容。

Answer 1

绘制图表的容器是由下一行代码动态添加的（在我的情况下，对于图形的所有变体，大致相同）：

$('#' + container).html($('#' + container).html() + "<div class=\"graph\" id=\"" + graphid + "\"></div>");

当我使用Elycharts库但使用Highcharts时，这常常起作用，这就产生了在正确绘制线之前图形被副本替换的问题。我通过执行以下操作来修复此问题：

$('#' + container).append("<div class=\"graph\" id=\"" + graphid + "\"></div>");

jQuery的append方法将新的html添加到现有的html而不触及现有的html。这允许脚本完成线条/条形图的绘制/任何你想要绘制的内容。