drill-down chart will load here
\n

现在，我们可以使用jQuery的 $ 选择器中的代码:

$(\"#drill-down-chart\")\n

Note: 如果页面上有多个图表, 每个图表都需要一个单独的容器 id.

步骤2:获取和构建数据

FusionCharts接受JSON和XML格式的数据, 但我选择使用JSON，因为它已经成为跨web应用程序数据交换的标准格式.\n基本图表的JSON数据数组包含每个数据图的对象, 在每个数据图对象中，我们定义其各自的标签和值. 这个结构看起来像:

\"data\": [{\n  \"label\": \"Q1\",\n  \"value\": \"850000\",\n}, {\n  \"label\": \"Q2\",\n  \"value\": \"2070000\",\n},...\n//更多的数据对象]\n

当我们绘制下钻图时，它的JSON变得更加复杂. 父图和子图之间的链接还需要一个 key-value 在数据数组的每个对象内配对. 新密钥(不出所料，称为 link)将包含子图表的id，当单击其父数据图时，您将获得该子图表.\n用于定义子图表的格式 id is newchart-dataFormat-childId. 因为我们使用的是JSON，所以我们知道链接的内容是什么样子的 newchart-json-childId. 以下是我们在图表中对它的定义:

\"data\": [{\n  \"label\": \"Q1\",\n  \"value\": \"850000\",\n  \"link\": \"newchart-json-q1\"\n}, {\n  \"label\": \"Q2\",\n  \"value\": \"2070000\",\n  \"link\": \"newchart-json-q2\"\n}, ...\n//更多的数据对象]\n

步骤3:插入图表数据

准备好数据后，就可以在页面上插入图表了 insertFusionCharts jQuery插件提供的方法:

$(\"#drill-down-chart\").insertFusionCharts ({\n  类型:“column2d”,\n  id: \"mychart\",\n  width: '100%',\n  height: '450',\n  dataFormat: json,\n  dataSource: {\n    \"chart\": {\n      \"caption\": \"Quarterly Revenue for 2015\",\n      \"paletteColors\": \"#9EA5FC\",\n      \"xAxisName\": \"Quarter (Click to drill down)\",\n      \"yAxisName\": \"Revenue (In USD)\",\n      //更多的图表配置选项\n    },\n\n    \"data\": [\n      //请参见步骤2\n    ],\n\n    \"linkedData\": [\n      //在步骤4中解释\n    ]\n  }\n})\n

让我们分解一下上面的代码片段:

\n
• \ntype 定义我们正在绘制的父图表的类型. In this case, column2d. FusionCharts库中的每个图表都有一个唯一的别名. 你可以在FusionCharts的图表列表页面上找到你想要绘制的图表的别名.
\n
• \nid 设置图表的唯一id，不要与控件的id混淆
  包含图表的元素. A chart’s id 用于选择用于应用事件处理程序和调用方法的图表. 我们将在步骤5中使用它.
\n
• \nwidth and height 以像素或百分比设置图表的尺寸. 100% width告诉图表占用整个容器宽度.
\n
• 定义数据格式 dataFormat attribute. 我们在示例中使用JSON，但也有其他可接受的数据格式, 例如XML URL. 要了解更多数据格式，请参考FusionCharts官方文档页面.
\n
• \ndataSource 包含图表的实际内容，以及 chart 对象包含图表的配置选项，例如标题和副标题. The data 数组看起来应该很熟悉，因为我们在步骤2中创建了它(它包含要绘制的数据)，并且 linkedData 包含子图的内容(单击父图上的数据图后得到的图表).
\n

步骤4:为子图表创建关联数据数组

现在我们已经定义了父图表, 现在是时候为每个数据图创建一个子图了, 这个过程与创建父图表非常相似. \nThe linkedData array, 在' insertFusionCharts '方法中创建, 将为每个子图表定义一个单独的对象吗. 下面是第一个子图的数据:

\"linkeddata\": [{\n      \"id\": \"q1\",\n      \"linkedchart\": {\n        \"chart\": {\n          \"caption\": \"Monthly Revenue\",\n          \"subcaption\": \"First Quarter\",\n          \"paletteColors\": \"#EEDA54, #A2A5FC, #41CBE3\",\n          \"labelFontSize\": \"16\",\n          //更多配置选项\n        },\n        \"data\": [{\n          \"label\": \"Jan\",\n          \"value\": \"255000\"\n        }, {\n          \"label\": \"Feb\",\n          \"value\": \"467500\"\n        }, //more data]\n      }\n    }， //更多子图表的内容\n

id 是我们在步骤2中定义的单个子图的id. linkedChart is similar to dataSource 因为它包含了图表的实际内容.\n图表对象中还有许多其他属性, 我将在后面的部分详细介绍, “利用图表属性改进设计”.

步骤5:自定义下钻配置

不同的图表类型

到目前为止，我们的示例代码使父图表和子图表共享相同的图表类型. 如果您想向下钻取到不同的图表类型(从列到饼), for example), 您可以通过绑定 fusionchartsrendered event.

$ (' # drill-down-chart ').Bind ('fusionchartsrendered'， function(event, args) {\n  FusionCharts.items['mychart'].configureLink({\n    type: \"doughnut2d\",\n    overlayButton: {\n      message: 'BACK'， //设置按钮显示diff消息 \n      背景:“# FCFDFD ',\n      borderColor:“# cccccc”\n    }\n  });\n});\n

在上面的代码中 fusionchartsrendered 事件将调用 configureLink 方法，该方法定义所有子图表以及任何覆盖按钮选项的类型. 您还可以为每个子图表指定单独的图表类型. \n有很多选项可用 configureLink 方法，所以你可能会发现从FusionCharts查看它的API参考文档是有用的.

渲染图表在不同的div

您可以做的另一件很酷的事情是将子图表呈现在不同的容器中，而不是与其父容器相同的容器中. 为此，定义一个单独的HTML

$(" #海图筒”).Bind ('fusionchartsrendered'， function(event, args) {\n  FusionCharts.items['mychart'].configureLink({\n    type: \"doughnut2d\",\n    renderAt:\"chart-container2\",\n    overlayButton: {\n      message: 'BACK'， //设置按钮显示diff消息\n      背景:“# FCFDFD ',\n      borderColor:“# cccccc”\n    }\n  });\n});\n

\"plotToolText\": \"
$label: $dataValue
\"\n