Question

请参阅http://jsfiddle.net/epoch/bCU2E/1/。

<div id="graph" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="sales" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="addsales" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

显示三个HighChart图表;一个对应于上面的每个div线。如果你进入HTML窗口并删除id =＆＃34; div＆＃34;的div行。并重新运行，只显示一个图表。

为什么删除一个div会删除两个图表？

现在请复制并粘贴相同的id =＆＃34;图表＆＃34; div行使得有两个＆＃34; graph＆＃34; div行跟随＆＃34;销售＆＃34;和＃34; addsales＆＃34; div lines。

<div id="graph" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="graph" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="sales" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="addsales" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

请重新开始。

为什么插入空白图区？为什么不插入＆＃34;流量来源的另一个副本＆＃34;图表？我猜这与前一个＆＃34; graph＆＃34;的实例有关。 div将第二个副本指向第一个图形div区域，因为命名已经建立。如果名称都被锁定，那么为什么它首先创建空白图表区域？

如果这是由div命名引起的，那么在没有触及javascript窗口的情况下，是否有任何方法可以导致＆＃34;流量来源的两个实例＆＃34;图表变得可见？如果允许更改javascript但是创建另一个var图表怎么办？是否有可能产生两个＆＃34;流量来源＆＃34;图表？

我问这些问题是因为我认为这是学习如何在一个页面上真正操作多个图表的必要踏脚石。我正在尝试构建20个图表，并将其留给用户选择要显示的图表，并允许用户控制所选图表的布局顺序和位置。任何建议都会有所帮助。谢谢。

Answer 1

虽然我不是Highcharts的专家，但我会尝试回答你的问题。

为什么删除一个div会删除两个图表？

这是因为Highcharts抛出异常（Highcharts Error #13），它无法找到要渲染到的指定div（graph）。但是因为graph div被渲染为第二个（sales之后），所以sales div呈现正常，然后发生异常，因此Highcharts停止渲染其他元素。简单检查 - 尝试删除sales div - 不呈现任何图表，因为在第一个div上抛出异常。

为什么插入空白图表区域？为什么不插入＆＃34;流量来源的另一个副本＆＃34;图表？

嗯，这是我的假设，但我认为如果已经找到一个，那么Highcharts会忽略具有相同id的div的副本。你不能像这样复制和粘贴div，因为：

强烈建议不要对DOM元素使用相同的id。
Highcharts使用renderTo属性按Id搜索并仅使用第一个找到的元素。＆＃34;空白副本＆＃34;实际上是你复制的div，它有宽度和高度，所以它在页面上显示为空块。

Answer 2

对于第一个问题，你正在成功创建第一个图，但第二个问题遇到javascript错误，寻找丢失的div然后停止代码执行（这就是JS的工作方式）。

对于第二个问题，你看到一个空位，因为HTML中的ID应该是唯一的。图表库仅查找单个位置。要创建图表的副本，请重复使用不同ID的图表代码，并将其传递给此处显示的图表的rendorTo值：

var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'ThisMustBeUnique',
            type: 'area'
        },

Answer 3

为什么删除一个div会删除两个图表？

因为当Javascript意识到容器不在那里时会抛出错误，并且停止执行代码。永远不会执行最后一个图表的代码（图形是Javascript中的第2个，共3个）。

为什么插入空白图表区域？

Highcharts会选择第一个作为容器。我猜是因为jQuery / Javascript在按ID搜索时会占用第一个。您可以看到jQuery在执行此代码时肯定只返回第一个：

console.log($('#graph'));

这是预期的。

为什么首先创建空白图表区域？

您的CSS定义了div的大小，而不是Highcharts。您对div的CSS：

min-width: 400px; height: 400px; margin: 0 auto

这导致空格。

没有触及javascript窗口，是否有任何方法可以导致两个＆＃34;流量来源＆＃34;图表变得可见？ ...如果允许更改javascript但是创建另一个var图表怎么办？是否有可能产生两个＆＃34;流量来源＆＃34;图表吗

在Javascript中执行此操作。要基于相同的选项显示两个图表，只需将选项保存在变量中并单独创建，如下所示：

var options = {
    chart: {
        type: 'area'
    },
    title: {
        text: 'Sales by source'
    },
    legend: {
        enabled: false,
    },
    //...more options
}

$('#container1').highcharts(options);
$('#container2').highcharts(options);

删除一个div时，单个页面上多个HighCharts的行为

3 个答案: