彩票走势图

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

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

点击下载AnyChart最新试用版

CSV字符串

要将数据设置为CSV字符串，请使用以下参数调用anychart.data.tree（）方法：

• CSV字符串

• 具有CSV映射的对象

• 具有CSV设置的对象（可选）

默认情况下，AnyChart会将CSV数据中的逗号视为列分隔符，并将换行符视为行分隔符，但是您可以在对象中指定替代设置并将其作为第三个参数传递。

使用columnsSeparator和rowsSeparator字段设置分隔符，并ignoreFirstRow在需要时忽略数据的第一行。

注意：数据的结构应类似于表中的数据集：通过映射id和parent字段来指定元素的层次结构（其他字段的选择取决于图表类型）。

以下示例显示了如何将数据设置为CSV字符串：

// create datavar data = "id;parent;name;value*" +
           "1;null;Root*"+
           "2;1;Parent 1*" +
           "3;2;Child 1-1;150000000*" +
           "4;2;Child 1-2;45000000*" +
           "5;2;Child 1-3;3200000*" +
           "6;1;Parent 2;*" +
           "7;6;Child 2-1;55000000*" +
           "8;6;Child 2-2;10600000*" +
           "9;6;Child 2-3;5200000*" +
           "10;1;Parent 3;*" +
           "11;10;Child 3-1;21000000*" +
           "12;10;Child 3-2;9000000*";
// create an object with a csv mapping
csvMapping = {"id": 0, "parent": 1, "name": 2, "value": 3};
// create an object with csv settings
csvSettings = {ignoreFirstRow: true, columnsSeparator: ";", rowsSeparator: "*"};
// create a data treevar treeData = anychart.data.tree(data, csvMapping, csvSettings);
// create a chart and set the datavar chart = anychart.treeMap(treeData);

制图

1、要重命名的树数据模型所需的字段- ，，children -传递一个映射对象到anychart.data.tree（）当您创建一个数据树的构造。parentid

如果将数据设置为树或表，请将映射作为第四个参数传递。请注意，第三个应设置为null–仅与CSV数据一起使用以指定CSV设置。CSV数据的映射应作为第二个参数传递。

之后，将数据树传递给图表构造函数或图表的data（）方法。

// create a data treevar treeData = anychart.data.tree(data, "as-tree", null, {children: "child_items"});
// create a chart
chart = anychart.ganttProject();
// set the data
chart.data(treeData);

2、如果需要重命名其他字段，请通过将映射对象传递到数据树的mapAs方法来创建映射。然后将映射传递给图表构造函数或图表的data（）方法。

// create a data treevar treeData = anychart.data.tree(data, "as-tree");
// map the datavar mapping = treeData.mapAs({actualStart: "start_date", actualEnd: "end_date"});
// create a chart
chart = anychart.ganttProject();
// set the data
chart.data(mapping);

可以在下面的示例中同时使用这两种映射数据的方式。

在这里，数据被设置为树。该anychart.data.tree（）构造函数的自定义字段映射child_items作为children由树的数据模型所需的字段。该一举成名方法映射start_date和end_date作为actualStart和actualEnd由甘特图必需的：

// create datavar data = [
  {
    id: "1",
    name: "Root",
    start_date: "2018-01-15",
    end_date: "2018-03-10",
    child_items: [
      {
        id: "1_1",
        name: "Child 1",
        start_date: "2018-01-15",
        end_date: "2018-01-25"
      },
      {
        id: "1_2",
        name: "Child 2",
        start_date: "2018-01-20",
        end_date: "2018-02-04"
      },
      {
        id: "1_3",
        name: "Child 3",
        start_date: "2018-02-05",
        end_date: "2018-02-05"
      },
      {
        id: "1_4",
        name: "Child 4",
        start_date: "2018-02-05",
        end_date: "2018-02-24"
      },
      {
        id: "1_5",
        name: "Child 5",
        start_date: "2018-02-25",
        end_date: "2018-03-10"
      }
  ]}];
// create a data treevar treeData = anychart.data.tree(data, "as-tree", null, {children: "child_items"});
// map the datavar mapping = treeData.mapAs({actualStart: "start_date", actualEnd: "end_date"});
// create a chart
chart = anychart.ganttProject();
// set the data
chart.data(mapping);

访问项目

AnyChart中的数据项被定义为anychart.data.Tree.DataItem类的实例。如果您需要访问它们，则可以搜索它们或调用特殊方法。

要在根级别访问项目，请使用anychart.data.Tree的以下方法：

• getChildAt（） –返回具有给定索引的根项目

• getChildren（） –返回根项目数组

• numChildren（） –返回根数

• indexOfChild（） –返回给定项目的索引（如果是根则返回-1）

要更深入一点，请使用anychart.data.Tree.DataItem的方法：

• getChildAt（） -返回具有给定索引的项的子项

• getChildren（） -返回包含项的所有子项的数组

• numChildren（） -返回项目的子代数

• getParent（） -返回项目的父项

阅读

您可以使用给定名称读取项目的数据字段的值：访问anychart.data.Tree.DataItem的实例并使用get（）方法。

在下面的示例中，此方法用于显示图表标题中的最后一个子项的名称：

// get the name of the last childvar lastChild = treeData.getChildAt(0).getChildren().length - 1;var lastChildName = treeData.getChildAt(0).getChildAt(lastChild).get("name");

新增中

您可以将根项目添加到数据中：在anychart.data.Tree实例上调用addChild（）或addChildAt（）方法。请注意，第二种方法添加具有给定索引的项目。

要将子元素添加到数据项，请访问anychart.data.Tree.DataItem的实例，并在其上调用addChild（）或addChildAt（）：

// add a new data item
treeData.getChildAt(0).addChild({"name": "New Child", "value": 10000000});

您还可以使用addData（）方法一次添加多个根项目：

//create new datavar newData = [
  {"name": "New Node 1", "value": 10000000},
  {"name": "New Node 2", "value": 10000000}];
// add new data
treeData.addData(newData, "as-tree");

注意： “树图”图表上只能显示一个根元素，因此尽管仍会更新数据，但是使用此方法不会更改树图的外观。

这是一个森伯斯特图表，其中的按钮一次添加两个根节点：

更新中

要更新项目的数据字段，请访问anychart.data.Tree.DataItem的实例并调用set（）。使用字段名称和新值作为参数：

// update the first child
treeData.getChildAt(0).getChildAt(0).set("name", "New Name");
treeData.getChildAt(0).getChildAt(0).set("value", 120000000);
treeData.getChildAt(0).getChildAt(0).set("fill", "#00bfa5");

删除

要从数据中删除根项，请在anychart.data.Tree实例上调用以下方法之一：

• removeChild（） -删除根

• removeChildAt（） -删除具有给定索引的根

• removeChildren（） -删除所有根

要删除数据项的子项，请访问anychart.data.Tree.DataItem的实例并调用以下方法之一：

• removeChild（） -删除一个子项

• removeChildAt（） -删除具有给定索引的子级

• removeChildren（） -删除所有子项

在此示例中，每次按下按钮时，都会删除根项目的当前最后一个子项：

var lastChild = treeData.getChildAt(0).getChildren().length - 1;
treeData.getChildAt(0).removeChildAt(lastChild);

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

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