这个页面演示如何开始使用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。 结果就是一个动态的图表,当新数据到来时图表向右滚动。