1

我正在使用 Highcharts 库制作的程序中显示一些数据。两段几乎相同的代码给出了非常不同的结果（第一段，有 2 行，没有显示任何内容，第二段，有 1 行，显示了我的期望）。为了确保我在图表的配置中没有做错任何事情，我从 highcharts 网站复制了以下代码并保持原样，但它产生了意想不到的结果：

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调用正确显示的图形（显然），但不调用上述图形。因此，在确定或执行比例的点与实际绘图之间出现了问题。

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

编辑

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

4

1 回答 1

0

绘制图表的容器由下一行代码动态添加（在我的例子中，所有图表的变体都差不多）：

$('#' + 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。这允许脚本完成线条/条/任何您想要绘制的绘制。

于 2013-05-28T12:41:13.803 回答