flutter 入门示例
If your website is data-intensive, then you will need to make that data easy to visualize, normally by means of a JavaScript charting library. However such libraries are a dime a dozen and they all have slightly different capabilities, so how do you know which is the best fit for you?
如果您的网站是数据密集型网站，则通常需要通过JavaScript图表库使这些数据易于可视化。 但是，这样的库只有一角钱，而且它们的功能都略有不同，那么您如何知道哪一个最适合您呢？
In this article, I’m going to present AnyChart by way of 10 stylish, yet easy-to-implement examples. I’ll demonstrate how AnyChart is a great fit for your data visualization needs and the ease with which it can handle data in almost any format.
在本文中，我将通过10个时尚但易于实现的示例来展示AnyChart 。 我将演示AnyChart如何非常适合您的数据可视化需求，以及它可以轻松处理几乎任何格式的数据。
You can find all of the CodePen examples from this article in our AnyChart Collection on CodePen.
您可以在CodePen上的AnyChart集合中找到本文中的所有CodePen示例。
为什么AnyChart从人群中脱颖而出 (Why AnyChart Stands out from the Crowd)
The following points illustrate why AnyChart is a serious contender on the charting scene. They are far from marketing, just plain and simple facts.
以下几点说明了为什么AnyChart是制图领域的重要竞争者。 它们远非营销，只是简单明了的事实。
AnyChart是公认的 (AnyChart is Well-established)
AnyChart is a commercial library, but it is free for any non-profit use. It is very well established and has been on the market for more than 10 years. Originally Flash-based, AnyChart has since moved over to pure JavaScript, with SVG/VML rendering.
AnyChart是一个商业图书馆 ，但对任何非营利性组织都是免费的。 它的地位很高，投放市场已经超过10年了 。 此后，AnyChart最初是基于Flash的，后来转为使用SVG / VML渲染的纯JavaScript。
The AnyChart API is very flexible and allows you to change almost any aspect of the chart on the fly, at runtime.
AnyChart API非常灵活，可让您在运行时即时更改图表的几乎任何方面。
AnyChart是产品家族 (AnyChart is a Product Family)
AnyChart is usually presented as a set of JS charting libraries, or — if you like — a product family. It comprises the following:
AnyChart通常以一组JS图表库或(如果您愿意的话)一个产品系列的形式提供。 它包括以下内容：
AnyChart — designed for creating interactive charts of all basic types
AnyChart —设计用于创建所有基本类型的交互式图表
AnyStock — intended to visualize large date/time based data sets
AnyStock —旨在可视化基于大型日期/时间的数据集
AnyGantt — for project and resource management solutions (Gantt, resource, PERT charts)
AnyGantt-用于项目和资源管理解决方案(Gantt，资源，PERT图表)
However, these libraries can be treated as one big JavaScript (HTML5) charting library. They all share the same API, all the charts are configured in pretty much the same way, they share common themes, settings and ways to load data.
但是，这些库可以被视为一个大JavaScript(HTML5)图表库。 它们都共享相同的API，所有图表的配置方式几乎相同，它们共享通用的主题 ， 设置和加载数据的方式 。
AnyChart是开放的 (AnyChart is Open)
Earlier this year, AnyChart opened the source code for these libraries. It’s important to point out here that AnyChart didn’t go fully open-source — no Apache, MIT or any other license of this kind was introduced. But this is still great news if you are choosing a library for a long-term project. Also, AnyChart’s rendering is based on the fully open-source JavaScript library GraphicsJS, maintained by AnyChart but open for any community requests and modifications. You can learn more about GraphicsJS in this SitePoint article.
今年初，AnyChart 打开了这些库的源代码 。 在这里必须指出，AnyChart并不是完全开源的，没有引入Apache，MIT或任何其他此类许可。 但是，如果您要为长期项目选择一个库，这仍然是个好消息。 另外，AnyChart的渲染基于完全开源JavaScript库GraphicsJS ，该库由AnyChart维护，但可针对任何社区请求和修改开放。 您可以在此SitePoint文章中了解有关GraphicsJS的更多信息。
As the Head of R&D at AnyChart, I could spend all day talking about this library, but now it’s time to get down to business.
作为AnyChart的研发主管，我可以花一整天的时间讨论这个库，但是现在该开始做生意了。
启动并运行：AnyChart快速入门 (Up and Running: Quick Start with AnyChart)
To start using AnyChart in your HTML page, you need to do just three simple things. The first two are including a link to the library’s JavaScript file and providing a block-level HTML element. Here is a sample HTML template you can make use of:
要开始在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>The third is adding the JavaScript code that creates a simple, interactive single-series column chart:
第三是添加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();
});And that’s all there is to it!
这就是全部！
See the Pen AnyChart Basic Sample by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen AnyChart基本示例 。
Easy, right? But things get even easier and more flexible in AnyChart when it comes to setting the data. Let’s proceed to the next section to take a closer look at that.
容易吧？ 但是，在设置数据方面，AnyChart变得更加轻松和灵活。 让我们继续进行下一部分，以进一步了解它。
将数据导入AnyChart (Getting Your Data into AnyChart)
One of the things that makes AnyChart shine is the fact that it can work with data in a large variety of formats. Which one you choose will ultimately depend on the task at hand (and to some extent your personal preference), but AnyChart’s flexible approach makes it a great fit for almost any project.
使AnyChart脱颖而出的原因之一是它可以处理多种格式的数据。 您选择哪一个最终将取决于手头的任务(在某种程度上取决于您的个人喜好)，但是AnyChart灵活的方法使其非常适合几乎所有项目。
数组数组 (Array of Arrays)
Actually, you have already seen the first way in the Quick Start with AnyChart section above. Using this method, you declare your data as an array of arrays and AnyChart does the rest. This method is concise, as well as easy to format and use.
实际上，您已经在上面的“ 使用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();
});See the Pen AnyChart Array of Arrays by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint )的Pen AnyChart数组数组 。
Notice that changing the chart type is as simple as changing the method call from anychart.column() to anychart.pie(). I’ll be demonstrating various other chart types throughout this article, but you can find a full overview here: Chart types and Combinations.
注意，改变图表类型是一样简单改变方法调用从anychart.column()到anychart.pie() 我将在本文中演示各种其他图表类型，但您可以在此处找到完整的概述： 图表类型和组合 。
对象数组 (Array of Objects)
The second way is pretty similar to the first one — setting data as array of objects. In fact, it is less compact but still very easy to format, read and understand. In addition, this format enables you to configure individual points from your data, which can also be handled in other ways but only with additional mappings.
第二种方法与第一种非常相似-将数据设置为对象数组。 实际上，它虽然不那么紧凑，但是仍然非常易于格式化，阅读和理解。 此外，这种格式使您可以从数据中配置单个点，也可以通过其他方式(仅使用其他映射)来处理这些点。
Note: when you use data in objects in a similar situation, use appropriate names for argument and value fields. You can find comprehensive information on this in the AnyChart documentation for each chart (series) type. In most cases, the argument is x, and the value is usually placed in the value field.
注意：在类似情况下在对象中使用数据时，请为参数和值字段使用适当的名称。 您可以在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();
});See the Pen AnyChart Array of Objects Sample by SitePoint (@SitePoint) on CodePen.
请参见CodePen上的SitePoint ( @SitePoint )的Pen AnyChart对象数组示例 。
创建多个序列图 (Creating Multiple Series Charts)
Multiple series charts are charts which allow you to plot the highs and lows of multiple datasets while also comparing them. When creating multiple series charts with AnyChart, you can use the previously introduced Array of Array and Array of Object methods, but additionally specify the names of your series. The AnyChart engine will take care of everything else.
多个序列图是一种图表，可让您在绘制多个数据集的高点和低点的同时进行比较。 使用AnyChart创建多个序列图时，可以使用以前介绍的Array of Array和Object Array方法，但还可以指定序列的名称。 AnyChart引擎将负责其他所有事务。
多个系列：数组数组 (Multiple Series: Array of Arrays)
Here is how it can be done if you want to use simple arrays:
如果要使用简单数组，请按以下步骤操作：
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();
});And here’s a basic sample of a multi-series chart in AnyChart created from an array of arrays (on CodePen):
这是从数组数组 (在CodePen上) 创建的AnyChart中的多系列图表的基本示例 ：
See the Pen AnyChart Easy Multi-Series: Arrays by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的Pen AnyChart Easy多系列： SitePoint( @SitePoint ) 数组 。
多个系列：对象数组 (Multiple Series: Array of Objects)
Now, let’s see how you can create a multi-series chart using an array of objects.
现在，让我们看看如何使用对象数组创建多系列图表。
Note: when you use objects like this, you can apply any field names for values.
注意：当您使用此类对象时，可以将任何字段名称应用于值。
Here’s how it can be done:
这是可以完成的方法：
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();
});See the Pen AnyChart Easy Multi-Series: Objects by SitePoint (@SitePoint) on CodePen.
见笔AnyChart的易多系列：对象由SitePoint( @SitePoint )上CodePen 。
显示HTML表格中的数据 (Displaying Data From an HTML Table)
Another way to load data into AnyChart is to use a table that already exists on the page. This can be an extremely effective way of visualizing the key points of an otherwise boring list of figures. To make this work, you’ll need to include a data adapter script along with the charting library.
将数据加载到AnyChart的另一种方法是使用页面上已经存在的表。 这可能是一种非常有效的方式来可视化原本无聊的图形列表的关键点。 为了使这项工作有效，您需要在图表库中包含一个数据适配器脚本。
Then there are two options, you can pull in data from tables created with the <table> tag or with <div> tags and CSS. Let’s look at both.
然后有两个选项，您可以从使用<table>标记或<div>标记和CSS创建的<table>提取数据。 让我们看看两者。
表标签 (Table Tag)
If you decide to implement the table tag option, your code might look like this:
如果决定实现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>With the following JavaScript:
使用以下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();
});And here’s what that looks like in practice. Pretty neat, I’m sure you’ll agree.
这就是实践中的样子。 非常简洁，我相信您会同意的。
See the Pen AnyChart HTML Table Parsing by SitePoint (@SitePoint) on CodePen.
见笔AnyChartHTML表格解析由SitePoint( @SitePoint上) CodePen 。
使用常规标记显示的数据 (Data Displayed Using Regular Markup)
Now, let’s look at how it works when you create a table with <div> tags and CSS:
现在，让我们看一下使用<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>With the following JavaScript:
使用以下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();
});You see it is possible to set CSS selectors for the table rows, heading and title. Basically, you don’t need to tune up the table itself — you can adjust the script and get the data from the markup.
您会看到可以为表行，标题和标题设置CSS选择器。 基本上，您不需要调整表本身-您可以调整脚本并从标记中获取数据。
See the Pen AnyChart HTML Div Table Parsing by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint )进行Pen AnyChart HTML Div表解析 。
使用JSON数据 (Working With JSON Data)
AnyChart charts have no problem in dealing with data in pure JSON format. In fact AnyChart works so well with JSON, that they even provides their own JSON schemas. JSON is a great data format if, for example, you want to store settings and data together. AnyChart also has a number of JSON serialization methods that can help with export.
AnyChart图表在处理纯JSON格式的数据时没有问题。 实际上，AnyChart与JSON配合得很好，它们甚至提供了自己的JSON模式 。 JSON是一种很好的数据格式，例如，如果您想将设置和数据存储在一起。 AnyChart还具有许多可以帮助导出的JSON序列化方法。
This is how you would create a column and spline combination chart from JSON data. This (and the following examples) require the data adapter script mentioned previously.
这就是从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();
});See the Pen AnyChart JSON Settings Sample by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen AnyChart JSON设置示例 。
处理XML数据 (Working with XML Data)
And if you don’t like JSON, you can stick to XML because AnyChart charts also have no problem dealing with data in XML format. As with JSON, AnyChart also provides their own XML schemas. XML is also a good fit whenever you are going to store the settings and data altogether. And again, AnyChart has a number of XML serialization methods available, which can be helpful with export.
而且，如果您不喜欢JSON，则可以坚持使用XML，因为AnyChart图表在处理XML格式的数据时也没有问题。 与JSON一样，AnyChart也提供了自己的XML模式 。 每当您要一起存储设置和数据时，XML也是一个很好的选择。 再一次，AnyChart有许多可用的XML序列化方法，这对导出很有帮助。
Here’s the sample code of a multi-series polar chart created from XML settings:
这是通过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();
});You can take a look at the AnyChart XML Settings sample on CodePen:
您可以在CodePen上查看AnyChart XML设置示例 ：
See the Pen AnyChart XML Settings Sample by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen AnyChart XML设置示例 。
处理以CSV格式存储的数据 (Working with Data Stored in CSV Format)
The last thing I would like to demonstrate is how you can work with data stored in comma-separated values (CSV) format. AnyChart supports this out of the box, with some additional configuration options (for example, what is used as a separator). CSV is well-known and frequently used format. It is good for big data sets and provides the opportunity to save bandwidth. You can load data from CSV (as demonstrated below), map it and then implement it in your charts.
我要说明的最后一件事是如何使用以逗号分隔值(CSV)格式存储的数据。 AnyChart具有一些其他配置选项(例如，用作分隔符的配置)开箱即用地支持此功能。 CSV是众所周知且经常使用的格式。 这对大数据集很有用，并提供了节省带宽的机会。 您可以从CSV加载数据(如下所示)，将其映射，然后在图表中实现。
The easiest way to load a CSV file into an AnyChart JS chart is if the file is actually comma separated, contains an argument in the first column, and has no header, i.e. looks something like this:
将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,53540Loading such a CSV file into your chart can be as easy as follows:
将这样的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();
});
});I’ve put a sample of loading CSV in AnyChart (on CodePen) for illustration:
我已将加载CSV的示例放在CodePen的AnyChart中进行说明：
See the Pen AnyChart from CSV File by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上SitePoint ( @SitePoint )的CSV文件中的Pen AnyChart 。
If the fields in your CSV file are ordered in a different way, data can be loaded into a data set and remapped (I’ll explain how that works in a future article covering more advanced uses of the AnyChart library). You can also fine-tune separators during the process of loading data into a data set.
如果CSV文件中的字段以不同的方式排序，则可以将数据加载到数据集中并重新映射(我将在以后的文章中介绍它的工作原理，其中涵盖了AnyChart库的更高级用法)。 您也可以在将数据加载到数据集中的过程中微调分隔符。
结论 (Conclusion)
In this article I have introduced you to the AnyChart JavaScript charting library. I have outlined its strengths and demonstrated how easy it is to harness its power to create complex and visually appealing charts in just a few lines of code. I have also demonstrated a number of ways of getting data into AnyChart, ranging from hard-coded data structures to the ability to load more complicated files over the network.
在本文中，我向您介绍了AnyChart JavaScript图表库。 我已经概述了它的优势，并展示了利用其功能仅用几行代码即可创建复杂且具有视觉吸引力的图表是多么容易。 我还演示了多种将数据导入AnyChart的方法，从硬编码的数据结构到通过网络加载更复杂的文件的能力，不一而足。
As mentioned, I’m the Head of R&D at AnyChart and would be glad to hear any feedback, questions, or ideas for improvement you may have in the comments.
如上所述，我是AnyChart的研发主管，很高兴听到您在评论中可能提出的任何反馈，问题或想法。
有用的链接 (Useful Links)
If you enjoyed this article, you might also like our screencast Creating an Illustration in Sketch and Exporting it as a SVG over on SitePoint Premium
如果您喜欢这篇文章，您可能还喜欢我们的截屏视频，在SitePoint Premium上通过Sketch创建插图并将其作为SVG导出。
翻译自: https://www.sitepoint.com/getting-started-anychart-examples/
flutter 入门示例
972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
