FlexChart 101
这个页面演示如何开始使用Wijmo的FlexChart控件。
这个页面演示如何开始使用Wijmo的FlexChart控件。
在JavaScript应用中开始使用FlexChart的步骤：
FlexChart控件有三个属性允许你来自定义图表的类型：
以下这个示例让你看见当你改变这些属性的时候发生了什么：
下面的示例演示如何创建和自定义漏斗图：
你可以对每个图表系列使用不同的图表类型，这是通过对它这个系列本身设置chartType属性。 这会覆盖图表的默认图表类型。
在以下的示例，这个图表的chartType属性被设为Column， 但是Downloads系列使用了LineAndSymbol类型覆盖它：
使用legend属性来自定义图表图例的外观， and 使用header，footer和坐标的title属性来向你的图表添加标题。
你可以使用CSS来确定图例和标题的样式。下面的CSS标签显示用于自定义图例和标题的外观的规则。 注意它们是SVG元素，所以你必须使用”fill”这样的CSS属性而不是”color”。
FlexChart对工具提示有内置的支持。 默认情况下，当用户触摸或者悬停鼠标到一个数据点时，控件会显示工具提示。
工具提示的内容是使用一个可能包含下列参数的模板生成：
默认情况下，tooltip模板被设为<b>{seriesName}</b><br/>{x} {y}，你可以在上面的图表看到它是如何工作的。
在这个示例中，我们设tooltip模板为<b>{seriesName}</b> <img src='resources/{x}.png'/><br/>{y},
它使用国家的国旗代替了国家的名字。
你可以通过设置模板为空字符串来禁用图表tooltips。
FlexChart为每个基于默认调色板的系列自动选取颜色，你可以通过设置palette属性来重写它。 但你也可以重写默认的属性，通过设置任意一个系列的style属性为一个对象， 它制定了SVG样式属性，包括fill, stroke, strokeThickness等等。
Series.style属性对在Wijmo中通过CSS设置样式的一般规则来说，是一个例外。 这个例外反映一个事实，许多图表有动态系列，这是不可能提前布置样式的。 比如，一个股票图表可能会展示用户在运行程序时才选中的系列。
这个示例中的图表使用了style和symbolStyle属性来为每个系列选择样式属性：
使用axis属性来自定义图表的坐标轴，包括范围（最小值和最大值），便签格式，刻度间隔和网格线。
Axis类有布尔属性，允许你打开或关闭功能（如axisLine, labels, majorTickMarks和majorGrid）。 你可以使用CSS来设置这些已经打开的功能的样式。
FlexChart的外观是在CSS中定义的。除了默认的主题，我们有十几个专业设计的主题。 它们定制了所有Wijmo控件的外观来达到一致的，有吸引力的效果。
为了自定义图表的外观，检查你想要提供样式的元素并创建一下CSS规则来应用到这些元素中。
例如，如果你在IE或者谷歌浏览器上右击X轴上的一个标签，你会发现它是一个拥有”wj-label”类的元素， 它被包含在拥有”wj-flexchart”类的顶层控件元素中。这个示例中第一条CSS规则使用这条信息来自定义X标签。 规则选择器添加了额外的要求，父类元素必须拥有"wj-flexchart"类和"custom-flex-chart"类。 如果没有的话，这个规则会用于这个页面所有的图表。
FlexChart允许你通过单击或者触摸选择系列或数据点。使用selectionMode属性来指定是否允许选择系列， 是否选择数据点或者无法选择（选择默认是关闭的）
设置selectionMode属性为Series或者Point会导致用户在单击鼠标的时候， FlexChart自动更新Selection属性， 并且将"wj-state-selected"类应用到选中的图表元素中。
Selection属性返回当前选中的系列。要得到当前选中的数据点， 得到当前选定的项并在选中的系列中使用Series.collectionView.currentItem属性，正如示例所示。
Series类有一个visibility属性，让你决定一个系列是否应该展现在图表和图例中， 或者只在图例中，或者完全隐藏。
这个示例演示你应该如何使用visibility属性来通过两种方法切换系列的可见性：
FlexChart支持渐变色。
渐变描述符是如下格式的表达式: <type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]].
<type>可以是线性的，也可以是径向的。
大写L或者R字母表示从SVG表明偏移的绝对坐标。
小写l或者r字母表示相对于应用渐变的元素计算的坐标。
坐标指定一个线性渐变向量x1, y1, x2, y2,
或者径向渐变向量 cx, cy, r和可选fx, fy, fr
指定远离圆心的焦点。
将<colors>指定为以虚线分隔的CSS颜色值的列表。 每种颜色可以后跟一个自定义偏移和不透明度值，用冒号字符分隔。
线性渐变格式示例：
'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8'
径向渐变格式示例：
'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff'
从预定义的渐变颜色中选择以查看不同的外观。
设置多个选项来自定义渐变色。
FlexChart内部使用了ICollectionView，因此你对数据源做的任何更改都会自动反映在图表中。
在这个示例中，我们使用一个计时器来向数据源中增加项目，丢弃旧项目以保持总数为200。 结果就是一个动态的图表，当新数据到来时图表向右滚动。