← 返回所有博客文章

使用Wijmo FlexChart控件,可以制作图表。它包含Column,Bar, Scatter,Line, LineSymbols, Area,Spline,SplineStymbols,SplineArea等多种图表类型。

 

本文介绍如何使用flexChart完成收入支出柱状图。

入门:

在JavaScript应用中开始使用FlexChart的步骤:

1.添加对Wijmo的引用。

2.添加标记作为FlexChart的宿主。

3.通过JavaScript初始化FlexChart和它的itemSource属性。

4.创建一个或多个数据系列,并将它们添加到FlexChart的系列集合。

5.(可选)添加一些CSS来自定义图表的外观。

图表类型

FlexChart控件有三个属性允许你来自定义图表的类型:

chartType: 对于所有系列对象选择默认的图表类型。个别系列对象可以覆盖它。

stacking: 确定系列对象是否独立地绘制,堆积或百分比堆积。

rotated: 翻转X轴和Y轴,导致X变为垂直,Y变为水平。

本文柱状图,设置ChartType是Bar。

工具提示

FlexChart对工具提示有内置的支持。 默认情况下,当用户触摸或者悬停鼠标到一个数据点时,控件会显示工具提示。

工具提示的内容是使用一个可能包含下列参数的模板生成:

  • seriesName: 包含图表元素的系列名称
  • pointIndex: 系列中图表元素的参数
  • x: 图表元素的x
  • y: 图表元素的y
  • 你可以通过设置模板为空字符串来禁用图表tooltips。
    本文设置Tooltip的代码:
tooltip: { content: "<b> {x}:</b><br/>{seriesName}:{y}" },

自定义轴

使用axis属性来自定义图表的坐标轴,包括范围(最小值和最大值),便签格式,刻度间隔和网格线。

Axis类有布尔属性,允许你打开或关闭功能(如axisLine, labels, majorTickMarksmajorGrid)。 你可以使用CSS来设置这些已经打开的功能的样式。

本文中的代码参考:

chart.axisY.axisLine = true;
  chart.axisX.axisLine = true;
     chart.axisX.majorGrid=true;
     chart.axisY.majorGrid=false;

 

效果如图:

image

 

本文的源代码请参考链接:http://runjs.cn/code/zd9q09lz

更多资源:

Wijmo中文官网:/developer/wijmojs

Wijmo5在线示例:/developer/wijmojscore

Wijmo5产品文档:/developer/wijmojscore

FlexChart接口文档:/developer/wijmojscore

如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.grapecity.com.cn/showforum-140.html