angular图表_如何在Angular中构建图表

不念不忘少年蓝@ 2023-02-22 03:36 32阅读 0赞

angular图表

It is very easy to get lost in the flood of JavaScript frameworks and libraries that we, as front-end developers, have to choose from these days. Every week some new framework springs up and takes you back to the comparison board, making your task of selecting the right one extraordinarily difficult. You don't even know that the new shiny thing that looks great today will survive even the next six months.

如今，作为前端开发人员必须选择的大量JavaScript框架和库很容易迷失方向。 每周都会出现一些新的框架，并带您回到比较板上，这使选择正确的框架变得异常困难。 您甚至都不知道今天看起来很棒的新的闪亮东西即使在接下来的六个月中也能幸免。

But if there is one framework that has done consistently well over time, it has to be [Angular][]. It is backed by some of the biggest companies and it sure is here to stay.

但是，如果有一个框架随着时间的推移一直表现良好，那么它必须是[Angular][] 。 它得到了一些最大公司的支持，并且肯定会持续下去。

So today I'm going to give you a tutorial on how to visualize data using Angular - something that every developer should know. We are going to learn how to make beautiful charts using Angular, [FusionCharts][] and its [Angular charts][] plugin.

因此，今天我将为您提供有关如何使用Angular可视化数据的教程-每个开发人员都应了解的知识。 我们将学习如何使用Angular， [FusionCharts][]及其[Angular图表][Angular charts]插件制作漂亮的图表。

## 第1部分：在Angular中构建第一个图表 **(**Part 1: Building Your First Chart in Angular**)** ##

I have divided the complete process into four easy to understand steps. This is what we are making (you can [see live version here][], and find [GitHub repo here][]):

我将整个过程分为四个易于理解的步骤。 这就是我们正在做的(您可以[在此处查看实时版本][see live version here] ，并[在此处][see live version here]找到[GitHub存储库][GitHub repo here] )：

[![format_png][]][see live version here]

### 步骤1：包括所需JavaScript文件 **(**Step-1: Include required JavaScript files**)** ###

Our project is dependent on following three files:

我们的项目依赖于以下三个文件：

*  Core [AngularJS library][Angular]: any minified 1.x will work.
    
    核心[AngularJS库][Angular] ：任何缩小的1.x都可以使用。
 *  FusionCharts’ JS charts files: get them from [here][].
    
    FusionCharts的JS图表文件：从[此处][here]获取。
 *  Angular charts plugin: get it from [here][Angular charts].
    
    角度图表插件：从[此处][Angular charts]获取。

From FusionCharts core package, we need to include both `fusioncharts.js` and `fusioncharts.charts.js` present inside JS folder.

在FusionCharts核心软件包中，我们需要同时包含JS文件夹中存在的`fusioncharts.js`和`fusioncharts.charts.js` 。

We will include all the above files using HTML `<script>` tags:

我们将使用HTML `<script>`标签包含上述所有文件：

<script type="text/javascript" src="angular.min.js"></script>
    
    
    <script type="text/javascript" src="fusioncharts.js"></script>
    <script type="text/javascript" src="fusioncharts.charts.js"></script>
    
    
    <script type="text/javascript" src="angular-fusioncharts.min.js"></script>

### 步骤2：创建AngularJS应用 **(**Step-2: Create the AngularJS App**)** ###

Next we need to create the Angular app and inject `ng-fusioncharts` module, which is the plugin we are using. This is how we do it:

接下来，我们需要创建Angular应用程序并注入`ng-fusioncharts`模块，这是我们正在使用的插件。 这是我们的做法：

var app = angular.module('chartApp', ['ng-fusioncharts']);

### 步骤3：定义控制器 **(**Step-3: Define controller**)** ###

In this step we will define a controller for our app. For this, we augment the controller scope with datasource and other chart configurations for our chart:

在这一步中，我们将为我们的应用程序定义一个控制器。 为此，我们使用数据源和其他图表配置来扩大控制器范围：

app.controller('MyController', function($scope) {
      // chart data source
      $scope.dataSource = {
        "chart": {
          "caption": "Column Chart Built in Angular!",
          "captionFontSize": "30",
          // more chart properties - explained later
        },
        "data": [{
            "label": "CornflowerBlue",
            "value": "42"
          }, //more chart data
        ]
      };
    });

`$scope.dataSource` in the above code snippet will have all the content related to our chart - chart configuration and chart data in our case. For other chart types it may contain other things as well.

上面的代码片段中的`$scope.dataSource`将具有与图表相关的所有内容-本例中的图表配置和图表数据。 对于其他图表类型，它可能还包含其他内容。

A lot of configuration can be done through `chart` object but I am not covering it here as it is not required to plot a basic chart. You can jump to last section - ‘Improving the Design’ - to learn more about it.

通过`chart`对象可以完成很多配置，但是由于不需要绘制基本图表，因此在此不做介绍。 您可以跳至最后一部分-“改进设计”以了解更多信息。

### 步骤4：呈现图表 **(**Step-4: Render the chart**)** ###

We are almost done now. To render the chart, add `fusioncharts` directive inside the `<div>` where you want to render your chart. This is how we do it:

现在我们差不多完成了。 要呈现图表，请在要呈现图表的`<div>`内添加`fusioncharts`指令。 这是我们的做法：

In the above code we used:

在上面的代码中，我们使用了：

*  `width` and `height` to set chart size. A width of 100% makes the chart take up full container width and makes it responsive.
    
    `width`和`height`以设置图表大小。 100％的宽度使图表占据了整个容器的宽度并使其具有响应能力。
 *  `type` to set the chart type. You can find alias for the chart you want to plot on [this chart list page][].
    
    `type`以设置图表类型。 您可以在[此图表列表页面][this chart list page]上找到要绘制的图表的别名。
 *  `dataFormat` to define the data format we will be using to feed data.
    
    `dataFormat`定义我们将用于提供数据的数据格式。
 *  `dataSource` to define content for our chart (see step-3 for more details).
    
    `dataSource`来定义图表的内容(有关更多详细信息，请参见第3步)。

## 第2部分：事件处理程序 **(**Part 2: Event Handlers**)** ##

Plotting charts that look good is one thing, but to make them truly interactive you need some way to handle events. Good for us, FusionCharts has made it easier to add a [variety of events to its charts][]. Event handling is a big topic in itself and my goal here is to give you a basic overview. It will help you build a solid foundation so that further exploration becomes a little easier.

绘制看起来不错的图表是一回事，但是要使其真正具有交互性，则需要某种方式来处理事件。 对我们有利，FusionCharts使[在其图表中][variety of events to its charts]添加[各种事件][variety of events to its charts]变得更加容易。 事件处理本身就是一个大话题，我在这里的目标是向您提供基本概述。 这将帮助您建立坚实的基础，从而使进一步的探索变得容易一些。

In this example I will make use of [`dataPlotClick`][dataPlotClick] event. Data plot refers to the column in a column chart or line in a line chart. `dataPlotClick` is triggered when someone clicks the data plot. In our case whenever somebody clicks a column, we are going to display the color of the clicked column below the chart.

在此示例中，我将使用[`dataPlotClick`][dataPlotClick]事件。 数据图是指柱形图中的列或折线图中的折线。 当有人单击数据图时会触发`dataPlotClick` 。 对于我们来说，只要有人单击某列，我们将在图表下方显示被单击列的颜色。

<div class="statusbar" style="{
        { colorValue }}">{
        { selectedValue }}</div>

$scope.selectedValue = "Please click on a column";
    $scope.events = {
      dataplotclick: function(ev, props) {
        $scope.$apply(function() {
          $scope.colorValue = "background-color:" + props.categoryLabel + ";";
          $scope.selectedValue = "You clicked on: " + props.categoryLabel;
        });
      }
    };

Event handler receives `ev` and `props` as its arguments:

事件处理程序接收`ev`和`props`作为其参数：

*  `ev` contains details related to the event - type of event, event id etc.
    
    `ev`包含与事件相关的详细信息-事件类型，事件ID等。
 *  `props` contains details about the particular data plot on which the event occurred. In our case it will have label, value etc. of the column that was clicked.
    
    `props`包含有关发生事件的特定数据图的详细信息。 在我们的例子中，它将具有被单击列的标签，值等。

We extract and pass the label of the clicked column using `props.categoryLabel`. We then change text and background color using that value.

我们使用`props.categoryLabel`提取并传递单击列的标签。 然后，我们使用该值更改文本和背景颜色。

To explore more on events, please visit [this API reference page][]. It has good description and a working JSFiddle demo for every event.

要了解有关事件的更多信息，请访问[此API参考页面][this API reference page] 。 对于每个事件，它都有很好的描述和有效的JSFiddle演示。

## 第3部分：改进设计 **(**Part 3: Improving the Design**)** ##

Although I wanted to study design, I never devoted time to it. And now when I have to design a page or any app that I am working on, I just use my gut feeling, but I digress. So coming to our Angular charts, there is a lot you can do to improve the look and feel of your charts using something known as [chart attributes][].

尽管我想学习设计，但是我从来没有花时间在设计上。 现在，当我不得不设计一个页面或我正在处理的任何应用程序时，我只是用自己的直觉，但我离题了。 因此，进入我们的Angular图表，您可以做很多事情，以使用[图表属性][chart attributes]来改善图表的外观。

There are hundreds of things you can customize for a chart. For example, you can use `baseFont` to change the font family of your chart. You can use `bgColor` to change the background color of your chart.

您可以为图表自定义数百种内容。 例如，您可以使用`baseFont`更改图表的字体系列。 您可以使用`bgColor`更改图表的背景颜色。

I can go on and on about this, but it won’t make a difference. Best it to bookmark the page linked above and just search for the chart type you are making. Whatever you think of customizing inside a chart, you will probably find an attribute for it.

我可以继续说下去，但是不会有什么不同。 最好在上面链接的页面添加书签，然后仅搜索您要创建的图表类型。 无论您想在图表内部进行自定义，都可能会找到一个属性。

Have any questions? That’s what the comments section is for ;) Feel free to ask. I will be more than happy to help!

有什么问题吗？ 这就是评论部分的目的;)随时提出。 我将竭诚为您服务！

> 翻译自: [https://davidwalsh.name/angular-charts][https_davidwalsh.name_angular-charts]

angular图表

[Angular]: https://angularjs.org/
[FusionCharts]: http://www.fusioncharts.com/
[Angular charts]: http://www.fusioncharts.com/angularjs-charts/
[see live version here]: http://vikaslalwani.com/angular-charts/
[GitHub repo here]: https://github.com/lalwanivikas/angular-charts
[format_png]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLWNoYXJ0LnBuZw?x-oss-process=image/format,png
[here]: http://www.fusioncharts.com/download/
[this chart list page]: http://www.fusioncharts.com/dev/getting-started/list-of-charts.html
[variety of events to its charts]: http://www.fusioncharts.com/dev/advanced-chart-configurations/events/introduction-to-events.html
[dataPlotClick]: http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events.html#event-dataplotClick
[this API reference page]: http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events.html
[chart attributes]: http://www.fusioncharts.com/dev/chart-attributes.html
[https_davidwalsh.name_angular-charts]: https://davidwalsh.name/angular-charts