彩票走势图

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐：

AnyChart现已更新至最新版本8.7.0，九大数据可视化新功能上线，改进了功能并修复了一些bug。新版本，新功能，赶快下载体验吧~（点击查看更新详情）

点击下载AnyChart最新试用版

树形图数据模型

类

这是允许您在AnyChart中使用树数据的类的列表：

• tree - anychart.data.Tree

• item - anychart.data.Tree.DataItem

• traverser - anychart.data.Traverser

快速开始

要使用树状数据创建图表，请通过将数据作为第二个参数传递给anychart.data.tree（）方法来创建数据树"as-tree"。然后将树传递给图表构造函数：

// create datavar data = [
  {name:   "Root", children: [
    {name:   "Child 1", value: 65511098},
    {name:   "Child 2", value: 64938716},
    {name:   "Child 3", value: 59797978},
    {name:   "Child 4", value: 46070146}
  ]}];
// create a data treevar treeData = anychart.data.tree(data, "as-tree");
// create a chart and set the datavar chart = anychart.treeMap(treeData);
// set the container id
treemap.container("container");
// initiate drawing the chart
treemap.draw();

下面的示例演示如何使用相同的树状数据创建不同的图表类型：

设定数据

Anychart中的树数据结构定义为anychart.data.Tree类的实例，数据项定义为anychart.data.Tree.DataItem的实例。

要基于树状数据创建图表，您应该将数据组织为树状或表状。另外，您可以使用CSV字符串（另请参见：CSV中的数据）。然后，该数据由组件处理，并创建anychart.data.Tree的实例。

1、创建数据树。第一步是使用或作为第二个参数将数据传递到anychart.data.tree（）方法："as-tree""as-table"

var treeData = anychart.data.tree(data, "as-tree");
var treeData = anychart.data.tree(data, "as-table");

如果您的数据是CSV字符串，则应传递CSV映射对象作为第二个参数。在CSV字符串部分中了解更多信息。

2、创建图表。然后将此方法创建的anychart.data.Tree类的实例传递给图表构造函数：

var chart = anychart.treeMap(treeData);

您也可以跳过第一步，也可以使用or 参数将数据传递到图表的data（）方法或直接传递到图表构造函数。在这种情况下，anychart.data.tree（）的实例是隐式创建的（要获取它，请使用图表的data（）方法）。"as-tree""as-table"

3、数据字段。数据字段的选择取决于图表类型以及数据的结构方式。如果数据以树的形式组织，children则始终需要该字段。如果组织为表或CSV字符串，id并且parent是必需的-它们被用于指定元素的层次结构。

注1：要了解如何重新命名树的数据模型（默认的领域children，parent，id）或地图自定义字段，请参阅映射部分。

注2：甘特图id始终需要该字段。

作为树形图

如果将数据组织为一棵树，则每个父项都应具有一个children数据字段，在其中指定子项数组。

// create datavar data = [
  {name:     "Root", children: [
    {name:   "Parent 1", children: [
      {name: "Child 1-1", value: 150000000},
      {name: "Child 1-2", value:  45000000},
      {name: "Child 1-3", value:   3200000}
    ]},
    {name:   "Parent 2", children: [
      {name: "Child 2-1", value:  55000000},
      {name: "Child 2-2", value:  10600000},
      {name: "Child 2-3", value:   5200000}
    ]},
    {name:   "Parent 3", children: [
      {name: "Child 3-1", value:  21000000},
      {name: "Child 3-2", value:   9000000}
    ]}  
  ]} ];
// create a data tree
treeData = anychart.data.tree(data, "as-tree");
// create a chart and set the datavar chart = anychart.treeMap(treeData);

表格

如果将数据组织为表格，则在parent每个项目的字段中，应指定id其父项的值。根项目的父项应设置为null或不指定。

// create datavar data = [
  {id:  1, parent: null, name: "Root"},
  {id:  2, parent:    1, name: "Parent 1"},
  {id:  3, parent:    2, name: "Child 1-1", value: 150000000},
  {id:  4, parent:    2, name: "Child 1-2", value:  45000000},
  {id:  5, parent:    2, name: "Child 1-3", value:   3200000},
  {id:  6, parent:    1, name: "Parent 2"},
  {id:  7, parent:    6, name: "Child 2-1", value:  55000000},
  {id:  8, parent:    6, name: "Child 2-2", value:  10600000},
  {id:  9, parent:    6, name: "Child 2-3", value:   5200000},
  {id: 10, parent:    1, name: "Parent 3"},
  {id: 11, parent:   10, name: "Child 3-1", value:  21000000},
  {id: 12, parent:   10, name: "Child 3-2", value:   9000000}];
// create a data tree
treeData = anychart.data.tree(data, "as-table");
// create a chart and set the datavar chart = anychart.treeMap(treeData);

=====================================================

想要购买Anychart正版授权的朋友可以。