Anychart

完整演示代码

<!doctype html>
<head>
    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
    <script>
      anychart.onDocumentLoad(function () {
        // create an instance of a pie chart
        var chart = anychart.pie();
        // set the data
        chart.data([
          ["Chocolate", 5],
          ["Rhubarb compote", 2],
          ["Crêpe Suzette", 2],
          ["American blueberry", 2],
          ["Buttermilk", 1]
        ]);
        // set chart title
        chart.title("Top 5 pancake fillings");
        // set the container element 
        chart.container("container");
        // initiate chart display
        chart.draw();
      });
    </script>
</head>
<body>
    <div id="container" style="width: 500px; height: 400px;"></div>
</body>
</html>

积分系统(图例右下角的展示小组件)

text() 更改积分文本 alt() 更改悬停显示提示 url() 链接 logoScr() 商标图片

var credits = chart.credits();
credits.text("Company")
credits.alt("Custom tooltip")
credits.url("http://www.baidu.com")
credits.logoSrc("https://www.baidu.com/images/baidu.pug")

积分只能通过css进行调整样式

// 修改整个积分系统的位置
.anychart-credits{
  left: 10px !important;
  width: 200px !important;
}
// 修改商标的位置
.anychart-credits-logo{
  right: 10px;
  left: auto !important;
}
// 修改文本的位置
.anychart-credits-text{
  right: 25px;
  left: auto !important;
}

禁用需要花钱买许可证密钥

anychart.licenseKey("YOUR-LICENSE-KEY");
var credits = chart.credits();
credits.enabled(false);

仪表板是基于展示的仪表板布局

// create a stage 
var stage = anychart.graphics.create("container");
// configure stage credits
var credits = stage.credits();
credits.text("Dashboard");

模组系统

引用其他任何模块之前, 先引用这些

// 核心模块 最核心 小
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
// 基本模块 基本使用 中 
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-bundle.min.js"></script>
// 捆绑模块 所有模块和功能 大
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>

组合模块使用

<head>
  <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-pie.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-exports.min.js"></script>
</head>

数据格式

支持多种数据格式 @1 js api

// create a pie chart
var chart = anychart.pie([    ['Product A', 1222],
    ['Product B', 2431],
    ['Product C', 3624],
    ['Product D', 5243],
    ['Product E', 8813]
]);

// set container id for the chart
chart.container('container');

// initiate chart drawing
chart.draw();

@2 XML

// create an XML string
var xmlString = '<xml>' +
                '<chart type="pie" >' +
                  '<data>' +
                    '<point name="Product A" value="1222"/>' +
                    '<point name="Product B" value="2431"/>' +
                    '<point name="Product C" value="3624"/>' +
                    '<point name="Product D" value="5243"/>' +
                    '<point name="Product E" value="8813"/>' +
                  '</data>' +
                '</chart>' +
              '</xml>';
              
// create a chart from xml config              
var chart = anychart.fromXml(xmlString);

// set container id for the chart
chart.container('container');

// initiate chart drawing
chart.draw();

@3 JSON

// create json data
var json = {
    "chart": {
        "type": "pie",
        "data": [            ["Product A", 1222],
            ["Product B", 2431],
            ["Product C", 3624],
            ["Product D", 5243],
            ["Product E", 8813]
        ]
    }
};

// create chart from json config              
var chart = anychart.fromJson(json);

// display a chart
chart.container('container').draw();

@ 4 CSV

// create CSV string
var csvString = '2009-02-05,6764.81\n' +
      '2009-02-07,7056.48\n' +
      '2009-02-18,7180.97\n' +
      '2009-02-26,7269.06\n' +
      '2009-02-25,7349.58\n' +
      '2009-02-24,7115.34\n' +
      '2009-02-23,7365.99\n' +
      '2009-02-20,7461.49\n' +
      '2009-02-19,7555.23';
      
// create an area chart      
var chart = anychart.area();

// create the area series based on CSV data
chart.area(csvString);

// display a chart
chart.container('container').draw();

数据集

将数据表示为行的集合为多系列图表设置数据时特别有用

数据集 anychart.data.Set 数据视图 anychart.data.View 迭代器 anychart.data.Iterator

设定数据

// 创建数据集
var dataSet = anychart.data.set(data);
// 映射数据 数组数组格式和CSV字符串需要映射
var mapping = dataSet.mapAs({x: 0, value: 1});
var mapping = dataSet.mapAs({x: "x", value: "value"});
// 创建系列
var chart = anychart.column();
var series = chart.column(mapping);
// 或者 数据以对象数组的形式组织, 直接传递
var chart = anychart.column();
var series = chart.column(dataSet);

数组数组

// create data
data = [  ["January", 12000],
  ["February", 15000],
  ["March", 16000],
  ["April", 14000],
  ["May", 10000]
];

// create a data set
var dataSet = anychart.data.set(data);

// map the data
var mapping = dataSet.mapAs({x: 0, value: 1});

// create a chart
var chart = anychart.column();

// create a series and set the data
var series = chart.column(mapping);

对象数组

// create data
  var data = [
    {x:"January", value: 12000},
    {x:"February", value:  15000},
    {x:"March", value:  16000},
    {x:"April", value:  14000},
    {x:"May", value:  10000}
  ];

// create a data set
var dataSet = anychart.data.set(data);

// create a chart
var chart = anychart.column();

// create a series and set the data
var series = chart.column(data);

CVS字符串

// create data
var data = "x;value*" +
       "January;12000*" +
       "February;15000*" +
       "March;16000*" +
       "April;14000*" +
       "May;10000*";

// create an object with csv settings
csvSettings = {ignoreFirstRow: true, columnsSeparator: ";", rowsSeparator: "*"};

// create a data set
var dataSet = anychart.data.set(data, csvSettings);

// map the data
var mapping = dataSet.mapAs({x: 0, value: 1});

// create a chart
var chart = anychart.column();

// create a series and set the data
var series = chart.column(mapping);

数据增删改查

getRowsCount() 获取数据集的行 row() 根据索引获取行的值 get() 根据索引和name 获取 value

// get the argument and value of the last point
var rowsCount = dataSet.getRowsCount();
var lastPointName = mapping.get(rowsCount - 1, "x");
var lastPointValue = mapping.get(rowsCount - 1, "value");

append() 数据集的最后增加数据

dataSet.append({"x": "New Point 1", "value": 16000},
               {"x": "New Point 2", "value": 15000});

insert() 选定位置增加数据

dataSet.insert(["New Point", 16000], -1);
dataSet.insert({"x": "New Point", "value": 16000}, -1);

如果增加的数据格式为数组数组则需要mapping一下

var mapping = dataSet.mapAs({x: 0, value: 1, fill: 2});
dataSet.append(["New Point 1", 16000, "#ef6c00"]);
dataSet.insert(["New Point 2", 15000, "#00bfa5"]);

row() 更新一个行

dataSet.row(0, ["New Name", 16000]);
dataSet.row(0, {"x": "New Name", "value": 16000});
var mapping = dataSet.mapAs({x: 0, value: 1, fill: 2});
dataSet.row(0, ["New Name", 16000, "#ef6c00"]);

set() 更新(替换/设置)一个值 row的index field的name 新的value

mapping = dataSet.mapAs({x: 0, value: 1, fill: 2, stroke: 2});
mapping.set(0, "x", "New Name");
mapping.set(0, "value", 16000);
mapping.set(0, "fill", "#ef6c00");
mapping.set(0, "stroke", "#ef6c00");

remove()删除行

dataSet.remove(dataSet.getRowsCount() - 1);

find() 查找

// find a row
var index = mapping.find("x", "April");
// select a row
series.select(index);

filter() 过滤

// remove points with values less than a given one
function filterValue() {
  var input = document.getElementById("valueInput").value;
  var newMapping = mapping.filter("value", function(value) {
    return value >= input;
  });
  series.data(newMapping);
}

数据迭代器

anycart.data.Iterator 数据迭代器 getIlterator() 获取迭代器 advance() 进行下一行 get() 返回当前行的值 getIndex() 返回该索引的行 getRowsCount() 返回该行数据的总和 meta() 获取元数据 reset() 重置迭代器到初始位置 select() 跳转到某行

// search for points with values equal or greater than a given one
var input = document.getElementById("valueInput").value;
var newMapping = mapping.filter("value", function(value) {
  return value >= input;
});

// get the iterator
var iterator = newMapping.getIterator();

// select the points and get their arguments
var pointNames = [];
while (iterator.advance()) {
  var name = iterator.get("x");
  var index = mapping.find("x", name);
  series.select(index);
  pointNames.push(name);
}

系列

系列是一组数据, 系列具有类型, 可以随时更改系列数据

添加

可以使用以系列类型命名的方法(colunm() bar() ...)创建新系列, 并将数据集或者数据组用作该方法的参数 addSeries()方法可以向图表添加任意数量的系列. 该方法的数据可以以不同的格式传递 addSeries()添加的系列的类型由defaultSeriesType()设置

// set chart type
var chart = anychart.cartesian();

// set default series type
chart.defaultSeriesType("column");

// create series
chart.addSeries(data1, data2, data3);

识别

@1 索引 getSeriesAt() 获得该索引的一个系列

// get forth series
var series = chart.getSeriesAt(3);

// set series inner color
series.fill("red");

如果尝试的索引数组超过图表上的序列数, 则放回null 使用while循环调整图表中的每个序列非常方便

// create chart
var chart = anychart.column();

// define default series type
chart.defaultSeriesType("column");

// set data for multiple series
chart.addSeries(data1, data2, data3);

var i=0;
// create a loop
while (chart.getSeriesAt(i)){
  // rename each series
  chart.getSeriesAt(i).name("Series #" + (i+1));
  i++;
}

getSeriesCount() 获取图表中的确切序列数, 使用for循环遍历所有序列, 请注意, 索引始终是连续的, 次循环可以随时执行, 并且您将始终经历每个系列, 就像使用while循环一样

var seriesIndexes = [];
for (var i=0; i < chart.getSeriesCount();i++){
seriesIndexes.push(chart.getSeriesAt(i).index());
}

@2 ID ID() 设置了一系列的唯一标识符设置自定义ID时, 可以使用将系列ID作为参数的getSeries()方法来获取到系列对象的链接

// create chart
var chart = anychart.column();

// create variable for series
var series;
// create first series
series = chart.column(data1);
// set id for the first series
series.id("First Series");
// create second series
series = chart.column(data2);
// set id for second series
series.id("Second Series");

// get first series
series = chart.getSeries("First Series");
// rename first series
series.name("First Series");

删除

如果知道删除的系列的ID, 调用removeSeries(ID) 当系列没有ID时, 可以使用removeSeriesAt(index)方法将其删除

// create chart
var chart = anychart.bar();

// create 3 series
chart.addSeries(data0, data1, data2);

// remove third series
chart.removeSeriesAt(2);

处理逐个删除之外, 调用removeAllSeries()方法从当前图表中删除所有系列

树数据模型

分层的树状结构, 数据项通过父子关系连接

Class

树:anychart.data.Tree item: anychart.data.Tree.DataItem 遍历器: anychart.data.Traverser children数据字段, 其中指定子项数组示例:

// create data
var 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 tree
var treeData = anychart.data.tree(data, "as-tree");

// create a chart and set the data
var chart = anychart.treeMap(treeData);

// set the container id
treemap.container("container");

// initiate drawing the chart
treemap.draw();

如果数据组织为表格 parent每个项目字段中, 应该指定id其福祥的值, 根项目的父项应设置为null或不指定

// create data
var 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 data
var chart = anychart.treeMap(treeData);

CSV

默认情况下，AnyChart将CSV数据中的逗号视为列分隔符，将换行符视为行分隔符，但是您可以在对象中指定替代设置并将其作为第三个参数传递。使用columnsSeparator和rowsSeparator字段设置分隔符，并ignoreFirstRow在需要时忽略数据的第一行。注意：数据的结构应类似于表中的数据集：通过映射id和parent字段来指定元素的层次结构（其他字段的选择取决于图表类型）

// create data
var 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 tree
var treeData = anychart.data.tree(data, csvMapping, csvSettings);

// create a chart and set the data
var chart = anychart.treeMap(treeData);

映射

@1 重命名树数据模型

// create a data tree
var 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

// create a data tree
var treeData = anychart.data.tree(data, "as-tree");

// map the data
var mapping = treeData.mapAs({actualStart: "start_date", actualEnd: "end_date"});

// create a chart
chart = anychart.ganttProject();

// set the data
chart.data(mapping);

@3 两种映射数据的方式

// create data
var 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 tree
var treeData = anychart.data.tree(data, "as-tree", null, {children: "child_items"});

// map the data
var mapping = treeData.mapAs({actualStart: "start_date", actualEnd: "end_date"});

// create a chart
chart = anychart.ganttProject();

// set the data
chart.data(mapping);

存取项目

数据项anychart.data.Tree.DataItem anychart.data.Tree的方法: getChildAt() 索引根项目 getChildren() 根项目数组 numChildren() 返回根数 indexOfChild() 返回给定项目索引 anychart.data.Tree.DataItem的方法: getChildAt() 给定索引项的子项 getChildren() 所有子项的数组 numChildren() 返回项目的子代数 getParent() 项目的父项

数据处理

查 get()

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

增 addChild() addChildAt()

// add a new data item
treeData.getChildAt(0).addChild({"name": "New Child", "value": 10000000});
// -----------------------------------------
// 添加多个根项目
//create new data
var newData = [
  {"name": "New Node 1", "value": 10000000},
  {"name": "New Node 2", "value": 10000000}
];

// add new data
treeData.addData(newData, "as-tree");

改 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);

搜索 search() 结合使用Treemap的drillTo() ->查找具有特定名称的项目并向下钻取至该项目

/* locate an item in the data tree
and get it as an object */
var item = treeData.search("name", "Item 3-4");

// drill down to the item
chart.drillTo(item);

搜索项目 searchItems()

// create data
var data = [
  {
    id: "1",
    name: "Root",
    actualStart: "2018-01-15",
    actualEnd: "2018-03-10",
    actual: {},
    employee: {firstName: null, lastName: null},
    children: [
      {
        id: "1_1",
        name: "Child 1",
        actualStart: "2018-01-15",
        actualEnd: "2018-01-25",
        employee: {firstName: "John", lastName: "Doe"}
      },
      {
        id: "1_2",
        name: "Child 2",
        actualStart: "2018-01-20",
        actualEnd: "2018-02-04",
        employee: {firstName: "Frank", lastName: "Foe"}
      },
      {
        id: "1_3",
        name: "Child 3",
        actualStart: "2018-02-05",
        actualEnd: "2018-02-05",
        employee: {firstName: "Marta", lastName: "Moe"}
      },
      {
        id: "1_4",
        name: "Child 4",
        actualStart: "2018-02-05",
        actualEnd: "2018-02-24",
        employee: {firstName: "John", lastName: "Doe"}
      },
      {
        id: "1_5",
        name: "Child 5",
        actualStart: "2018-02-25",
        actualEnd: "2018-03-10",
        employee: {firstName: "Jane", lastName: "Poe"}
      }
  ]}
];

// create a data tree
treeData = anychart.data.tree(data, "as-tree");

// create a gantt chart
chart = anychart.ganttProject();

// set the data
chart.data(treeData);

// a comparison function
function comparisonFunction(fieldValue, comparisonValue) {
  if (comparisonValue == fieldValue.firstName + fieldValue.lastName) {
    return 0;
  } else {
    return 1;
  }
}

// search for items
var items = treeData.searchItems("employee", "JohnDoe", comparisonFunction);

过滤 filter()

// search for items with duration equal or greater than a given one
var input = (document.getElementById("valueInput").value) * 1000 * 3600 * 24;
var items = treeData.filter(function(item) {
  return item.get("actualEnd") - item.get("actualStart") >= input;
});

创建索引 anychart.data.Tree.createIndexOn() / removeIndexOn()

// create an index
treeData.createIndexOn("value");

遍历 getTraveser() 获取 anychart.data.Traverser 对象调用其方法 advance() 下一个 current() 当前 get() 获取 getDepth() 项目的深度 meta()元值 nodeYieldCondition() 确定是返回项目的函数 set() 设置当前项目的值 reset() 重置第一项默认位置 toArray() 变为数组 traverseChildrenCondition() 设置/获取一个函数, 该函数确定遍历器是否遍历项的子项

// 显示所有数据项的名称
// get the traverser of a tree
var traverser = treeData.getTraverser();

/* get the element displaying information about the tree */
var treeInfo = document.getElementById("treeInfo");

// display the names of all data items in the tree
while (traverser.advance()) {
  var newElement = document.createElement("li");
  newElement.innerText = traverser.get("name");
  treeInfo.appendChild(newElement);
}
// --------------------------
// 向下钻取图表的所有节点
// get the traverser of a tree
traverser = treeData.getTraverser();

// skip the root node
traverser.advance();

// get the next data item and drill to it
function nextItem() {
  // try to go to the next item
  if (traverser.advance()) {
    /* get the current item
    as an instance of the dataItem class */
    var dataItem = traverser.current();
    // drill down to the item
    chart.drillTo(dataItem);
  }
  else {
    //reset the traverser
    traverser.reset();
  }
}

大事件 bigEvent treeItemMove 数据项移动 treeItemUpdate 数据项更新 treeItemCreate 数据项创建 treeItemRemove 数据项被删除

// 侦听事件
/* listen to the treeItemMove event
and update the chart title */
treeData.listen("treeItemMove", function (e) {
  var itemName = e.item.get("name");
  chart.title("Tree Data Model: Events<br><br>< " +
              "<span style = 'color:#990000'>" +
              itemName + ": </span> treeItemMove >");
});

/* listen to the treeItemUpdate event
and update the chart title */
treeData.listen("treeItemUpdate", function (e) {
  var itemName = e.item.get("name");
  chart.title("Tree Data Model: Events<br><br>< " +
              "<span style = 'color:#990000'>" +
              itemName + ": </span> treeItemUpdate >");
});

/* listen to the treeItemCreate event
and update the chart title */
treeData.listen("treeItemCreate", function (e) {
  var itemName = e.item.get("name");
  chart.title("Tree Data Model: Events<br><br>< " +
              "<span style = 'color:#990000'>" +
              itemName + "</span>: treeItemCreate >");
});

表数据模型

Class

表-anychart.data.Table 映射-anychart.data.TableMapping 行选择-anychart.data.TableSelectable 表格行-anychart.data.TableSelectable.RowProxy 迭代器-anychart.data.TableIterator 计算-anychart.data.TableComputer 计算行-anychart.data.TableComputer.RowProxy

设定数据

@1 数组数组

// create a data table 
var dataTable = anychart.data.table(0);

// add data
dataTable.addData([  ["2015-12-25", 512.53, 514.88, 505.69, 507.34],
  ["2015-12-26", 511.83, 514.98, 505.59, 506.23],
  ["2015-12-27", 511.22, 515.30, 505.49, 506.47],
  ["2015-12-28", 510.35, 515.72, 505.23, 505.80],
  ["2015-12-29", 510.53, 515.86, 505.38, 508.25],
  ["2015-12-30", 511.43, 515.98, 505.66, 507.45],
  ["2015-12-31", 511.50, 515.33, 505.99, 507.98],
  ["2016-01-01", 511.32, 514.29, 505.99, 506.37],
  ["2016-01-02", 511.70, 514.87, 506.18, 506.75]
]);

// map the data
var mapping = dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});

// create a stock chart
var chart = anychart.stock();

// create a plot and an ohlc series 传递系列构造函数
var ohlcSeries = chart.plot(0).ohlc(mapping);

@2 对象数组

 create a data table
var dataTable = anychart.data.table("x");

// add data
dataTable.addData([
  {"x": "2015-12-25", "open": 512.53, "high": 514.88, "low": 505.69, "close": 507.34},
  {"x": "2015-12-26", "open": 511.83, "high": 514.98, "low": 505.59, "close": 506.23},
  {"x": "2015-12-27", "open": 511.22, "high": 515.30, "low": 505.49, "close": 506.47},
  {"x": "2015-12-28", "open": 510.35, "high": 515.72, "low": 505.23, "close": 505.80},
  {"x": "2015-12-29", "open": 510.53, "high": 515.86, "low": 505.38, "close": 508.25},
  {"x": "2015-12-30", "open": 511.43, "high": 515.98, "low": 505.66, "close": 507.45},
  {"x": "2015-12-31", "open": 511.50, "high": 515.33, "low": 505.99, "close": 507.98},
  {"x": "2016-01-01", "open": 511.32, "high": 514.29, "low": 505.99, "close": 506.37},
  {"x": "2016-01-02", "open": 511.70, "high": 514.87, "low": 506.18, "close": 506.75}
]); 

// map the data
var mapping = dataTable.mapAs({open: "open", high: "high", low: "low", close: "close"});

// create a stock chart
var chart = anychart.stock();

// create a plot and an ohlc series
var ohlcSeries = chart.plot(0).ohlc(mapping);

@3 CVS

// create data
var data = "Dates;Open;High;Low;Close*" +
           "2015-12-25;512.53;514.88;505.69;507.34*" +
           "2015-12-26;511.83;514.98;505.59;506.23*" +
           "2015-12-27;511.22;515.30;505.49;506.47*" +
           "2015-12-28;510.35;515.72;505.23;505.80*" +
           "2015-12-29;510.53;515.86;505.38;508.25*" +
           "2015-12-30;511.43;515.98;505.66;507.45*" +
           "2015-12-31;511.50;515.33;505.99;507.98*" +
           "2016-01-01;511.32;514.29;505.99;506.37*" +
           "2016-01-02;511.70;514.87;506.18;506.75";

// create an object with csv settings
csvSettings = {ignoreFirstRow: true, columnsSeparator: ";", rowsSeparator: "*"};

// create a data table
var dataTable = anychart.data.table(0);

// add data
dataTable.addData(data, null, csvSettings);

// map the data
var mapping = dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});

// create a stock chart
var chart = anychart.stock();

// create a plot and an ohlc series
var ohlcSeries = chart.plot(0).ohlc(mapping);
ohlcSeries.name("ACME Corp.");

数据处理

查 anychart.data.TableSelectable.RowProxy的方法 get()
getColumn() 列的索引 getIndex() 行的索引 getKey() 行的键搜 anychart.data.TableSelectable.RowProxy的方法 search()

// get the shown range of points
var range = chart.getSelectedRange();

// get the values of the first and last point of the range
var firstPoint = selectable.search(range.firstSelected, "nearest");
var lastPoint = selectable.search(range.lastSelected, "nearest");
var firstDate = firstPoint.getColumn(0);
var firstLow = firstPoint.get("low");
var firstHigh = firstPoint.get("high");
var lastDate = lastPoint.getColumn(0);
var lastLow = lastPoint.get("low");
var lastHigh = lastPoint.get("high");

增 addData() anychart.data.Table的方法

var mapping = dataTable.mapAs(
  {open: 1, high: 2, low: 3, close: 4, risingStroke: 5, fallingStroke: 5}
);

dataTable.addData([
  ["2016-01-01", 511.32, 514.29, 505.99, 506.37, "4 #00838f"],
]);

改 addData() anychart.data.Table 更新

// 更新表数据
// create a data table
dataTable = anychart.data.table(0);

// add data
dataTable.addData([  ["2015-12-25", 506.69, 511.88],
  ["2015-12-26", 507.59, 514.98],
  ["2015-12-27", 505.49, 516.30],
  ["2015-12-28", 506.23, 514.72],
  ["2015-12-29", 505.38, 517.86],
  ["2015-12-30", 506.66, 516.98],
  ["2015-12-31", 505.99, 513.33],
  ["2016-01-01", 507.99, 515.29],
  ["2016-01-02", 506.18, 514.87]
]);

// map the data
mapping = dataTable.mapAs({low: 1, high: 2, fill: 3});

// create a stock chart
var chart = anychart.stock();
    
// create a plot and an ohlc series
var ohlcSeries = chart.plot(0).rangeColumn(mapping);

// update the first row
dataTable.addData([["2015-12-25", 510.69, 516.88," #dd2c00"]]);

删 anychart.data.Table的remove()

dataTable.remove("2015-12-28", "2015-12-31");  
dataTable.removeFirst(1);

迭代器 anychart.data.TableSelectable advance() - 下一行 get() getIndex() getKey() reset()

// 更改范围, 数据更新
/* create the selectable object
and select rows corresponding to the shown points */
selectable = mapping.createSelectable();
selectable.select(range.firstSelected, range.lastSelected);

// get the iterator
var iterator = selectable.getIterator();

// display information about shown points in the table
while (iterator.advance()) {
  var key = iterator.getKey();
  var date = anychart.format.dateTime(key, "dd.MM.yyyy");
  var low = iterator.get("low");
  var high = iterator.get("high");  
}
// ---------------------------
// 所选数据按两年分组
/* create the selectable object,
select rows corresponding to the shown points, and group them */
selectable = mapping.createSelectable();
selectable.select(range.firstSelected, range.lastSelected, "year", 2);

基本图表

常规设置

@1 外观设置三种状态: 正常悬停选择

// create the first series (area)
var series1 = chart.area(seriesData_1);

// configure the visual settings of the first series
series1.normal().fill("#04b4ae", 0.3);
series1.hovered().fill("#04b4ae", 0.1);
series1.selected().fill("#04b4ae", 0.5);
series1.normal().hatchFill("zig-zag", "#808080", 1, 15);
series1.hovered().hatchFill("zig-zag", "#808080", 1, 15);
series1.selected().hatchFill("zig-zag", "#808080", 1, 15);
series1.normal().stroke("#04b4ae");
series1.hovered().stroke("#04b4ae", 2);
series1.selected().stroke("#04b4ae", 4);

// create the second series (line)  
var series2 = chart.line(seriesData_2);

// configure the visual settings of the second series
series2.normal().stroke("#04b404");
series2.hovered().stroke("#04b404", 2);
series2.selected().stroke("#04b404", 4);

// create the third series (line)
var series3 = chart.line(seriesData_3);

// configure the visual settings of the third series
series3.normal().stroke("#aeb404", 1, "10 5", "round");
series3.hovered().stroke("#aeb404", 2, "10 5", "round");
series3.selected().stroke("#aeb404", 4, "10 5",  "round");

标记物特殊的符号标记序列中的某些点

// enable and configure markers on the first series
series1.markers(true);
series1.markers().type("star5");
series1.markers().fill("gold");
series1.markers().size(10);

标签可以放置在任何图表上任何位置的文本或图像元素

// enable and configure labels on the series
series.labels(true);
series.labels().fontColor("green");
series.labels().fontWeight(900);
series.labels().format("${%value}");

工具提示样式按钮集合工具

// configure tooltips on the chart
chart.tooltip().title("Information");
chart.tooltip().format("Manager: {%categoryName} \n{%seriesName}: ${%value}");

legend 列出解释其元素, 增加易读性

// enable the legend
chart.legend(true);

轴和刻度控制网格

// configure the main y-scale
var yScale1 = anychart.scales.linear();
yScale1.maximum(20000);

// configure an extra y-scale
var yScale2 = anychart.scales.linear();
yScale2.maximum(150);

// configure the main y-axis
var yAxis1 = chart.yAxis(0);
yAxis1.scale(yScale1);
yAxis1.title("Sales, $");

// configure an extra y-axis
var yAxis2 = chart.yAxis(1);
yAxis2.orientation("right")
yAxis2.scale(yScale2);
yAxis2.title("Number of Items Sold");

// bind the first series to the main y-scale
series1.yScale(yScale1);

// bind the second series to the extra y-scale
series2.yScale(yScale2);

堆码 Stacked Charts 点大小 Point Size 互动性大事件 (事件侦听使用事件) 垂直图 3D图表按系列分类定制图纸

系列类型

seriesType() defaultSeriesType()

// 切换系列类型 使用seriesType()
// create data
var data = [    ["Spring", 10], 
    ["Summer", 15],
    ["Autumn", 8],
    ["Winter", 23]
];

// set the chart type
var chart = anychart.area();

// set the series type
var series = chart.area(data);

// switch the series type
series.seriesType("column");
//---------------------------------
var data1 = [16, 30, 45, 12, 5];
var data2 = [1, 51, 23, 64, 12];
var data3 = [18, 25, 10, 20, 35];

var chart = anychart.cartesian();

// set the default series type
chart.defaultSeriesType("column");

// add a series of the default type
chart.addSeries(dataSet1);
chart.addSeries(dataSet2);
chart.addSeries(dataSet3);

AnyChart基本技术总结

Anychart

完整演示代码

积分系统(图例右下角的展示小组件)

模组系统

数据格式

数据集

设定数据

数据 增删改查

数据迭代器

系列

添加

识别

删除

树数据模型

Class

CSV

映射

存取项目

数据处理

表数据模型

Class

设定数据

数据处理

基本图表

常规设置

系列类型

数据增删改查