AnyChart入门— 10个实用示例

最新推荐文章于 2017-05-09 00:00:00 发布

dingshi7798

最新推荐文章于 2017-05-09 00:00:00 发布

阅读量639

点赞数 1

文章标签： javascript json java ViewUI

如果您的网站是数据密集型网站，则通常需要通过JavaScript图表库使这些数据易于可视化。但是，这样的库只有一角钱，而且它们的功能都略有不同，那么您如何知道哪一个最适合您呢？

在本文中，我将通过10个时尚但易于实现的示例来展示AnyChart 。我将演示AnyChart如何非常适合您的数据可视化需求，以及它可以轻松处理几乎任何格式的数据。

您可以在CodePen上的AnyChart集合中找到本文中的所有CodePen示例。

为什么AnyChart从人群中脱颖而出

以下几点说明了为什么AnyChart是制图领域的重要竞争者。它们远非营销，只是简单明了的事实。

AnyChart已经建立

AnyChart是一个商业图书馆，但对任何非营利性组织都是免费的。它的地位很高，投放市场已经超过10年了。此后，AnyChart最初是基于Flash的，后来转为使用SVG / VML渲染的纯JavaScript。

AnyChart API非常灵活，可让您在运行时即时更改图表的几乎任何方面。

AnyChart是产品家族

AnyChart通常以一组JS图表库或（如果您愿意的话）一个产品系列的形式提供。它包括以下内容：

AnyChart —设计用于创建所有基本类型的交互式图表
AnyStock —旨在可视化基于大型日期/时间的数据集
AnyMap —用于地理地图和座位图
AnyGantt-用于项目和资源管理解决方案（Gantt，资源，PERT图表）

但是，这些库可以被视为一个大的JavaScript（HTML5）图表库。它们都共享相同的API，所有图表的配置方式几乎相同，它们共享通用的主题，设置和加载数据的方式。

AnyChart是开放的

今年初，AnyChart 打开了这些库的源代码。在这里必须指出，AnyChart并不是完全开源的，没有引入Apache，MIT或任何其他此类许可。但是，如果您要为长期项目选择一个库，这仍然是个好消息。另外，AnyChart的渲染基于完全开放源代码的JavaScript库GraphicsJS ，该库由AnyChart维护，但可以对任何社区请求和修改开放。您可以在此SitePoint文章中了解有关GraphicsJS的更多信息。

作为AnyChart的研发主管，我可以花一整天的时间讨论这个库，但是现在该开始做生意了。

启动并运行：AnyChart快速入门

要开始在HTML页面中使用AnyChart，您只需做三件事。前两个包括指向库的JavaScript文件的链接，并提供一个块级HTML元素。这是可以使用的示例HTML模板：

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
      }
    </style>
    <title>AnyChart Basic Example</title>
  </head>
  <body>
    <div id="container"></div>

    <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
    <script>
      // AnyChart code here
    </script>
  </body>
</html>

第三是添加JavaScript代码，以创建简单的交互式单系列柱形图：

anychart.onDocumentLoad(function() {
  // create chart and set data
  var chart = anychart.column([
    ["Winter", 2],
    ["Spring", 7],
    ["Summer", 6],
    ["Fall", 10]
  ]);
  // set chart title
  chart.title("AnyChart Basic Sample");
  // set chart container and draw
  chart.container("container").draw();
});

这就是全部！

请参阅CodePen上的SitePoint （ @SitePoint ）提供的Pen AnyChart基本示例。

容易吧？但是，在设置数据方面，AnyChart变得更加轻松和灵活。让我们继续进行下一部分，以进一步了解它。

将数据导入AnyChart

使AnyChart脱颖而出的一件事是事实，它可以处理多种格式的数据。您选择哪一个最终将取决于手头的任务（在某种程度上取决于您的个人喜好），但是AnyChart灵活的方法使其非常适合几乎所有项目。

数组数组

实际上，您已经在上面的“ 使用AnyChart快速入门”部分中看到了第一种方法。使用此方法，您可以将数据声明为数组数组，而其余的操作由AnyChart完成。此方法简洁明了，并且易于格式化和使用。

anychart.onDocumentLoad(function() {
  // create chart and set data
  // as Array of Arrays
  var chart = anychart.pie([
    ["Peter", 5],
    ["John", 7],
    ["James", 9],
    ["Jacob", 12]
  ]);
  chart.title("AnyChart: Array of Arrays");
  chart.container("container").draw();
});

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen AnyChart数组数组。

注意，改变图表类型是一样简单改变方法调用从anychart.column()到anychart.pie() 我将在本文中演示其他各种图表类型，但您可以在此处找到完整的概述：图表类型和组合。

对象数组

第二种方法与第一种非常相似-将数据设置为对象数组。实际上，它虽然不那么紧凑，但是仍然非常易于格式化，阅读和理解。此外，这种格式使您可以从数据中配置单个点，也可以通过其他方式来处理它，但只能使用其他映射。

注意：在类似情况下在对象中使用数据时，请为参数和值字段使用适当的名称。您可以在AnyChart文档中找到每种图表（系列）类型的全面信息。在大多数情况下，参数是x ，并且值通常放在value字段中。

anychart.onDocumentLoad(function() {
  // create chart and set data
  // as Array of Objects
  // the biggest point is marked with individually conigured marker
  var chart = anychart.line([
    {x: "Winter", value: 5},
    {x: "Spring", value: 9, marker: {enabled: true, type: "star5", fill: "Gold"}},
    {x: "Summer", value: 7},
    {x: "Fall",   value: 1}
  ]);
  chart.title("AnyChart: Array of Objects");
  chart.container("container").draw();
});

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen AnyChart对象数组示例。

创建多个序列图

多个序列图是一种图表，可让您在绘制多个数据集的高点和低点的同时进行比较。使用AnyChart创建多个序列图时，可以使用先前介绍的Array of Array和Object Array方法，但还可以指定序列的名称。 AnyChart引擎将负责其他所有事务。

多个系列：数组数组

如果要使用简单数组，请按以下步骤操作：

anychart.onDocumentLoad(function() {
  // create chart and set data
  // as Array of Arrays
  var chart = anychart.line()
  chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"],
   rows:[
    ["Winter", 5, 7, 4],
    ["Spring", 7, 9, 6],
    ["Summer", 9, 12, 8],
    ["Fall", 12, 15, 9]
  ]});
  chart.title("AnyChart: Multi-Series Array of Arrays");
  chart.legend(true);
  chart.container("container").draw();
});

这是AnyChart中由数组数组（在CodePen上）创建的多系列图表的基本示例：

请参阅CodePen上的Pen AnyChart Easy多系列： SitePoint（ @SitePoint ）数组。

多个系列：对象数组

现在，让我们看看如何使用对象数组创建多系列图表。

注意：当您使用此类对象时，可以将任何字段名称应用于值。

这是可以完成的方法：

anychart.onDocumentLoad(function() {
  // create chart and set data
  // as Array of Objects
  var chart = anychart.column();
  chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"],
   rows:[
    {x: "Winter", usd: 5, eur: 4, pound: 3},
    {x: "Spring", usd: 3, eur: 3, pound: 3},
    {x: "Summer", usd: 2, eur: 5, pound: 3},
    {x: "Fall",   usd: 4, eur: 2, pound: 3}
  ]});
  chart.title("Array of Objects");
  chart.legend(true);
  chart.container("container").draw();
});

见笔AnyChart的易多系列：对象由SitePoint（ @SitePoint ）上CodePen 。

显示HTML表格中的数据

将数据加载到AnyChart的另一种方法是使用页面上已经存在的表。这可能是一种非常有效的方式来可视化原本无聊的图形列表的关键点。要使此工作有效，您需要在图表库中包含一个数据适配器脚本。

然后有两个选项，您可以从使用<table>标记或<div>标记和CSS创建的<table>提取数据。让我们看看两者。

表标签

如果决定实现table标签选项，则代码可能如下所示：

<table id="htmlTable">
  <!-- Normal table markup here -->
</table>

<!-- Include the AnyChart library and data adapter -->
<script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/js/latest/data-adapter.min.js"></script>

使用以下JavaScript：

anychart.onDocumentLoad(function() {
  // create chart and set data
  var chart = anychart.column();
  // parse table
  var tableData = anychart.data.parseHtmlTable("#htmlTable");

  chart.data(tableData);
  chart.legend(true);
  // set chart container and draw
  chart.container("container").draw();
});

这就是实践中的样子。非常简洁，我相信您会同意的。

请参阅CodePen上的SitePoint （ @SitePoint ）进行Pen AnyChart HTML表解析。

使用常规标记显示的数据

现在，让我们看一下使用<div>标签和CSS创建表时的工作方式：

<div class="table">
  <div class="heading">
    <div class="cell">
      <p>Date</p>
    </div>
    ...
  </div>
  <div class="row">
    <div class="cell">
      <p>01/01</p>
    </div>
    ...
  </div>
</div>

<!-- Include the AnyChart library and data adapter -->
<script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/js/latest/data-adapter.min.js"></script>

使用以下JavaScript：

anychart.onDocumentLoad(function() {
  // create a chart and set the data
  var chart = anychart.column();

  var tableData = anychart.data.parseHtmlTable(
    ".table", ".row", ".cell p", ".heading .cell p", ".title"
  );

  chart.data(tableData);
  chart.legend(true);
  // set chart container and draw
  chart.container("container").draw();
});

您会看到可以为表行，标题和标题设置CSS选择器。基本上，您不需要调整表本身-您可以调整脚本并从标记中获取数据。

请参阅CodePen上的SitePoint （ @SitePoint ）进行Pen AnyChart HTML Div表解析。

使用JSON数据

AnyChart图表在处理纯JSON格式的数据时没有问题。实际上，AnyChart与JSON配合得很好，它们甚至提供了自己的JSON模式。 JSON是一种很好的数据格式，例如，如果您想将设置和数据存储在一起。 AnyChart还具有许多可以帮助导出的JSON序列化方法。

这就是从JSON数据创建柱状图和样条组合图的方式。这（和以下示例）需要前面提到的数据适配器脚本。

anychart.onDocumentReady(function() {
  // JSON data
  var json = {
    "chart": {
      "type": "column",
      "title": "AnyChart: Data from JSON",
      "series": [{
        "seriesType": "Spline",
        "data": [
          {"x": "P1", "value": "128.14"},
          {"x": "P2", "value": "112.61"},
          {"x": "P3", "value": "163.21"},
          {"x": "P4", "value": "229.98"},
          {"x": "P5", "value": "90.54"}
        ]
      },
      {
        "seriesType": "Column",
        "data": [
          {"x": "P1", "value": "90.54"},
          {"x": "P2", "value": "104.19"},
          {"x": "P3", "value": "150.67"},
          {"x": "P4", "value": "120.43"},
          {"x": "P5", "value": "200.34"}
        ]
      }],
      "container": "container"
    }
  };

  // set JSON data
  chart = anychart.fromJson(json);
  // draw chart
  chart.draw();
});

请参阅CodePen上的SitePoint （ @SitePoint ）提供的Pen AnyChart JSON设置示例。

处理XML数据

而且，如果您不喜欢JSON，则可以坚持使用XML，因为AnyChart图表在处理XML格式的数据时也没有问题。与JSON一样，AnyChart还提供了自己的XML模式。每当您要一起存储设置和数据时，XML也是一个很好的选择。同样，AnyChart提供了许多可用的XML序列化方法，这对导出很有帮助。

这是通过XML设置创建的多系列极坐标图的示例代码：

anychart.onDocumentReady(function() {
  // XML settings and data
  var xml = '<?xml version="1.0" encoding="utf-8"?>' +
    '<anychart xmlns="https://cdn.anychart.com/schemas/latest/xml-schema.xsd">' +
      '<chart type="polar" container="container">' +
        '<series_list>'+
          '<series series_type="area">' +
            '<data>' +
              '<point x="0" value="0"/>'+
              '<point x="50" value="100"/>'+
              '<point x="100" value="0"/>'+
            '</data>'+
          '</series>'+
          '<series series_type="line" stroke="red">' +
            '<data>' +
              '<point x="50" value="0"/>'+
              '<point x="100" value="100"/>'+
              '<point x="50" value="0"/>'+
            '</data>'+
          '</series>'+
        '</series_list>'+
        '<x_scale maximum="100"/>'+
      '</chart>'+
    '</anychart>';

  // Set settings and data as XML
  chart = anychart.fromXml(xml);
  // draw chart
  chart.draw();
});

您可以在CodePen上查看AnyChart XML设置示例：

请参阅CodePen上的SitePoint （ @SitePoint ）提供的Pen AnyChart XML设置示例。

处理以CSV格式存储的数据

我要说明的最后一件事是如何使用以逗号分隔值（CSV）格式存储的数据。 AnyChart具有一些其他配置选项（例如，用作分隔符的配置）开箱即用地支持此功能。 CSV是众所周知且经常使用的格式。这对大数据集很有用，并提供了节省带宽的机会。您可以从CSV加载数据（如下所示），将其映射，然后在图表中实现。

将CSV文件加载到AnyChart JS图表中的最简单方法是，如果文件实际上是逗号分隔的，在第一列中包含一个参数，并且没有标题，即如下所示：

Eyeshadows,249980
Eyeliner,213210
Eyebrow pencil,170670
Nail polish,143760
Pomade,128000
Lip gloss,110430
Mascara,102610
Foundation,94190
Rouge,80540
Powder,53540

将这样的CSV文件加载到图表中可以很容易，如下所示：

anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile("https://cdn.anychart.com/charts-data/data_csv.csv", function (data) {
    // create chart from loaded data
    chart = anychart.bar(data);
    // set title
    chart.title("AnyChart from CSV File");
    // draw chart
    chart.container("container").draw();
  });
});

我已将加载CSV的示例放在CodePen的AnyChart中进行说明：

请参阅CodePen上SitePoint （ @SitePoint ）的CSV文件中的Pen AnyChart 。

如果CSV文件中的字段以不同的方式排序，则可以将数据加载到数据集中并重新映射（我将在以后的文章中介绍它的工作原理，该文章涵盖AnyChart库的更高级用法）。您也可以在将数据加载到数据集中的过程中微调分隔符。