ember-nf-graph 是 EmberJS 的可组合图形组件库。ember-nf-graph 是一个基于组件的 DSL，可以在 Ember 应用中创建图形。
基础代码示例：
export default Ember.Route.extend({
model() { return {
myLineData: [
{ x: 0, y: 12 },
{ x: 1, y: 32 },
{ x: 2, y: 42 }, // ...
],
myAreaData: [
{ x: 0, y: 43 },
{ x: 1, y: 54 },
{ x: 2, y: 13 }, // ...
]
};
}
});
{{#nf-graph width=500 height=300}}
{{#nf-graph-content}}
<!-- add a line -->
{{nf-line data=model.myLineData}}
<!-- add an area -->
{{nf-area data=model.myAreaData}}
<!-- mix in any SVG element you want -->
<circle cx="40" cy="40" r="10"></circle> {{/nf-graph-content}}
<!-- axis ticks are templateable as well -->
{{#nf-y-axis as |tick|}}
<text>{{tick.value}}</text> {{/nf-y-axis}}
{{#nf-x-axis as |tick|}}
<text>{{tick.value}}</text> {{/nf-x-axis}}{{/nf-graph}}-
主要内容：什么是AWT 图形组件,常用的AWT 图形组件什么是AWT 图形组件 Graphics 图形控件允许应用程序在组件或图像上绘制。 常用的AWT 图形组件 图形组件 描述 Graphics 它是所有图形上下文的顶级抽象类。 Graphics2D 它是 Graphics 类的子类，提供对几何、坐标变换、颜色管理和文本布局的更复杂的控制。 Arc2D Arc2D 是存储由框架矩形、起始角度、角度范围（弧的长度）和闭合类型（OPEN、CHORD 或
-
在canvas中绘制复杂图形时，经常会出现图形交叉的情况，canvas把图形交叉的情况称作组合。 通过上下文对象的globalCompositeOperation属性来设置图形的组合方式，该属性的取值及其含义见表 4‑5。其中，source指新绘制的图形，而destination指原有的图形，默认值是source-over。 表 4‑5 globalCompositeOperation属性取值及含
-
绘制折线 上一节中，我们已经成功绘制了一条线段。那么，如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢？ 聪明的小伙伴肯定已经想到了，这还不简单，复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~ <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>绘制折线</title> <
-
Highcharts 柱形图 以下实例演示了堆叠组柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 drilldown 中添加 series 属性： 配置 drilldown：向下钻取 drilldown 用于向下钻取数据，深入到其中的具体数据。 drilldown: { series: drilldownSeries } 实例
-
Highcharts 柱形图 以下实例演示了堆叠组柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 plotOptions 中添加 stacking 属性： 配置 plotOptions：数据点选项 plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异。 配置图表堆叠设置 pl
-
Highcharts 组合图 以下实例演示了柱形图，线条图，饼图的组合。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 series 配置 设置 series 的 type 属性为 column/line/pie ，series.type 描述了数据列类型。默认值为 "line"。 var series = { type: 'colu