dojo chart详解

Dojo提供了一套很完善的统计图(Chart)接口,在dojox/charting下面,可以支持很多种类型的。

1、简介

Dojo统计图提供快速的、简单的接口实现美观的、交互性强的web统计图表的实现。

1.1 基本图表

下面的代码展示的是如何用html和dojo实现一个简单的统计图。

HTML:

<divid="simplechart"style="width: 250px; height: 150px; margin: 5px auto0px auto;"></div>

Javascript:

require(["dojox/charting/Chart","dojox/charting/axis2d/Default","dojox/charting/plot2d/Lines","dojo/domReady!"],
  function(Chart, Default, Lines){
    var chart1 =new Chart("simplechart");
    chart1.addPlot("default", {type:"Lines"});
    chart1.addAxis("x");
    chart1.addAxis("y", {vertical:true});
    chart1.addSeries("Series 1", [1,2,2,3,4,5,5,7]);
    chart1.render();
});

如上代码,创建任何一个图表都需要定义Plots, Axes和Series数据,其中,Plots是定义数据如何被显示,Axes定义的是数据显示的精度以及一些特殊的标签,Series是数据本身。

1.2 标题

有时候需要给图表添加标题,下面的代码演示的是如何给图表添加标题:

require(["dojox/charting/Chart","dojo/domReady!"],function(Chart){
    var chart =new dojox.charting.Chart("test", {
      title:"Production(Quantity)",
      titlePos:"bottom",
      titleGap:25,
      titleFont:"normal normal normal 15pt Arial",
      titleFontColor:"orange"
    });
  });

添加标题的参数如下:

名称

类型

默认值

描述

titlePos

string

top

定义添加标题的位置

titleGap

number

20

定义标题之间的间距

title

string

null

定义标题显示的内容

1.3 添加图表

addPlot()定义了你添加图表的类型,下面展示了一些基本的图表:

addPlot()需要两个参数,一个名称和一个参数数组。名称是非常重要的如果你有多种类型的图表存在的话。参数数组包含了你要定义的图标的一些参数,包括图表的类型等。下面的代码展示了addPlot()的使用:

require(["dojox/charting/plot2d/Areas", ...], function(Areas, ...){

// ...

 chart.addPlot("default", { type: Areas });

});

1.4 2D图表

2D的图表包括以下几种:

类型

样式

说明

线状图 Line charts

Default

Universal line chart capable to draw lines, fill areas under them, and placing markers at data points. This plot type is used if no plot type was specified when adding it to a chart.

Lines

Basic line chart. Uses Default.

Areas

Area under data line(s) will be filled. Uses Default.

Markers

Lines with markers. Uses Default.

MarkersOnly

Markers, sans lines. Uses Default.

堆积线图 Stacked line charts

Stacked

Data sets charted in relation to the previous data set. Extension of Default.

StackedLines

Stacked data sets using lines. Uses Stacked.

StackedAreas

Stacked data sets with filled areas under chart lines. Uses Stacked.

横向柱状图 Bars

Bars

Horizontal bars.

ClusteredBars

Horizontal bars with clustered data sets. Uses Bars.

StackedBars

Stacked data sets with horizontal bars. Uses Bars.

竖向柱状图 Columns

Columns

Vertical bars.

ClusteredColumns

Vertical bars with clustered data sets. Uses Columns.

StackedColumns

Stacked data sets with vertical bars. Uses Columns.

其他 Miscellaneous

饼状图 Pie

Typical pie chart or circle graph.

蜘蛛网图 Spider

A very effective tool for comparing multiple entities based on different characteristics.

散点图 Scatter

Similar to MarkerOnly, yet capable to chart using gradient fields.

气泡图 Bubble

Similar to scatter but with bubbles elements which sizes vary depending on the data.

网格图 Grid

For adding a grid layer to your chart.

仪表盘 Indicator

For adding vertical or horizontal indicator threshold on the chart.

1.4.1 Lines, Areas和Markers图表

Lines, Areas和Markers图表生成时,需要五个特别的参数。首先,有三个定义方向的参数,下面的代码展示了如何定义:

require(["dojox/charting/plot2d/StackedAreas", ...], function(StackedAreas, ...){
  chart.addPlot("default", { type: StackedAreas, lines:true, areas:true, markers:false });
});

此外,还有两个特殊参数, tension和interpolate。其中,tension容许你添加一些弯曲在你的图上,默认值为“”,其他可用值包括:

·       “X” – 立方贝萨尔平滑曲线。

·       “x” – 与“X”相似,但是默认数据点的集合是闭合循环的,一个班用于绘制真实的Xy值。

·       “S”平方贝萨尔平滑曲线。

例如:

require(["dojox/charting/plot2d/StackedLines", ...], function(StackedLines, ...){
  chart.addPlot("default", {type: StackedLines, tension:"S" });
});

Interpolate让你选择在没有数据的情况下的操作,如果为false(默认值),则为折线图,否则会根据前后的值进行插值,平滑曲线显示。

Markers是固定大小与样式重新定义图表主题的。例如:

require["dojox/charting/Chart","dojox/charting/SimpleTheme"],function(Chart, SimpleTheme){
  var myTheme =new SimpleTheme({
    markers: {
      CIRCLE:"m-6,0 c0,-8 12,-8 12,0, m-12,0 c0,8 12,8 12,0"
      SQUARE:"m-6,-6 12,0 0,12 -12,0z"
    }
  });
  var chart =new Chart().setTheme(myTheme);
});

1.4.2 Bars,Columns和Candle Stick图表

Bars,Columns和Candle Stick图表有一些特殊的参数去设置,主要有:

·       gap – 柱子之间的间距

·       minBarSize – 最小值

·       maxBarSize – 最大值

require(["dojox/charting/plot2d/Bars", ...], function(Bars, ...){
  chart.addPlot("default", { type: Bars, gap:5, minBarSize:3, maxBarSize:20 });
});

1.4.3 Bubble

Bubble提供特殊的参数去渲染,包括fill, stroke和shadow。例如:

require(["dojox/charting/plot2d/Bubble", ...], function(Bubble, ...){
  chart.addPlot("default", { type: Bubble, fill:"red" });
});

1.4.4 Pie

饼状图有一些特殊的参数去设置,如下(源自Pie.js):

defaultParams: {
    labels:true,
    ticks:false,
    fixed:true,
    precision:1,
    labelOffset:20,
    labelStyle:"default",      // default/columns/rows/auto
    htmlLabels:true            // use HTML to draw labels
},
optionalParams: {
    font:"",
    fontColor:"",
    radius:0
}

1.4.5 样式控制

添加填充(fill)

require(["dojox/charting/plot2d/Columns", ...], function(Columns, ...){
  chart.addPlot("default", { type: Columns, stroke: {color:"blue", width:2}, fill:"lightblue"});
});

添加阴影(shadow)

require(["dojox/charting/plot2d/Lines", ...], function(Lines, ...){
  chart.addPlot("default", { type: Lines, markers:true,
    tension:"X", shadow: {dx:2, dy:2} });
});

过滤器(filter)

require(["dojox/charting/plot2d/Columns","dojox/gfx/filters", ... , "dojox/gfx/svgext"],
  function(Columns, filters, ...){
  chart.addPlot("default", { type: Columns, fill:"red", filter: filters.shadows.dropShadow });
});

样式化函数(styleFunc)

require(["dojox/charting/plot2d/Columns", ...], function(Columns, ...){
  chart.addPlot("default", { type: Columns, styleFunc:function(item){
    if(item.y<10){
      return { fill :"red" };
    }elseif(item.y>60){
      return { fill:"green" };
    }
    return {};
  }});
});

标注(label)

require(["dojox/charting/plot2d/Columns", ...], function(Columns, ...){
  chart.addPlot("default", { type: Columns, label:true, labelStyle:"outside", labelOffset:25 });
});

1.4.6 Spider

Spider有一些特殊的参数去设置,参数如下:

defaultParams: {
  precision:1,
  labelOffset:     -10,        // axis title offset
  divisions:       3,            // axis tick count
  axisColor:       "",        // spider axis color
  axisWidth:       0,            // spider axis stroke width
  axisFont:"normal normal normal 11pt Arial"// spider axis font
  spiderColor:     "",        // spider web color
  spiderWidth:     0,            // spider web stroke width
  seriesWidth:     0,            // plot border with
  seriesFillAlpha:0.2,        // plot fill opacity
  spiderOrigin:    0.16,       // distance of 0 value from the middle of the circle
  markerSize:      3,            // radius of plot vertex (px)
  divisions:5,                // set division of the radar chart
  precision:0,                 // set decimal of the displayed number
  spiderType:         "polygon",     // style of spider web, "polygon" or "circle"
  animationType:   dojo.fx.easing.backOut,
}

下面的例子展示了相关参数的使用与设置:

require(["dojox/charting/plot2d/Spider","dojox/charting/widget/SelectableLegend", ...], function(Spider, SelectableLegend, ...){
   // ...
  chart.addPlot("default", {
    type: Spider,
    labelOffset:-10,
    divisions:5,
    seriesFillAlpha:0.2,
    markerSize:3,
    precision:0,
    spiderType:"polygon"
  });
  chart.addSeries("China", {data: {"GDP":2,"area":6,"population":2000,"inflation":15,"growth":12}}, { fill:"blue" });
  chart.addSeries("USA", {data: {"GDP":3,"area":20,"population":1500,"inflation":10,"growth":3}}, { fill:"green" });
  // ...
  chart.addSeries("Canada", {data: {"GDP":1,"area":18,"population":300,"inflation":3,"growth":15}}, { fill:"purple" });
  chart.render();
  var legend =new SelectableLegend({chart: chart, horizontal:true},"legend");
});

1.4.7 grid

Grid也是一个参数比较独特的图表。该图表在marker绘制直线,并通过四个布尔型的参数设置直线是否显示,如下:

require(["dojox/charting/plot2d/Grid", ...], function(Grid, ...){
  chart.addPlot("default", { type: Grid,
         hMajorLines:true,
         hMinorLines:false,
         vMajorLines:true,
         vMinorLines:false,
         majorHLine: { color:"green", width:3 },
         majorVLine: { color:"red", width:3 } });
});

1.5 配置坐标轴

1.5.1 制定坐标轴

require(["dojox/charting/plot2d/Lines", ...], function(Lines, ...){
  chart.addPlot("default", {type: Lines, hAxis:"x", vAxis:"y"});
  chart.addAxis("x");
  chart.addAxis("y", {vertical:true});
});

零值处理

chart.addAxis("x", {fixUpper:"major", fixLower:"minor"});
chart.addAxis("y", {vertical:true, fixUpper:"major", includeZero:true});

坐标标注重复处理leftBottom

require(["dojox/charting/Chart","dojox/charting/plot2d/Lines", ...], function(Chart, Lines, ...){
  // ...
  var chart =new Chart("simplechart");
  chart.addPlot("default", {type: Lines});
  chart.addPlot("other", {type: Areas, hAxis:"other x", vAxis:"other y"});
  chart.addAxis("x");
  chart.addAxis("y", {vertical:true});
  chart.addAxis("other x", {leftBottom:false});
  chart.addAxis("other y", {vertical:true, leftBottom:false});
  chart.addSeries("Series 1", [1,2,2,3,4,5,5,7]);
  chart.addSeries("Series 2", [1,1,4,2,1,6,4,3],
        {plot:"other", stroke: {color:"blue"}, fill:"lightblue"}
  );
  chart.render();
});

1.5.2 坐标的标题

Name

Type

Default

Description

title

string

null

axis title text.

titleGap

number

15

the spacing between title and corresponding axis, measured by pixel.

titleFontColor

string

black

axis title font color.

titleOrientation

string

axis

determine the title orientation to the axis, facing to the axis by “axis”, or facing away from the axis by “away”.

1.5.3 坐标轴颜色等

chart.addAxis("other y", {vertical:true,
  leftBottom:false,
  max:7,
  stroke:"green",
  font:"normal normal bold 14pt Tahoma",
  fontColor:"red",
  majorTick: {color:"red", length:6},
  minorTick: {stroke:"black", length:3}
});

1.5.4 坐标轴标注

chart.addAxis("x", {
    labels: [{value:1, text:"Jan"}, {value:2, text:"Feb"},
        {value:3, text:"Mar"}, {value:4, text:"Apr"},
        {value:5, text:"May"}, {value:6, text:"Jun"},
        {value:7, text:"Jul"}, {value:8, text:"Aug"},
        {value:9, text:"Sep"}, {value:10, text:"Oct"},
        {value:11, text:"Nov"}, {value:12, text:"Dec"}]
});

或者labelfunc

var myLabelFunc =function(text, value, precision){
   return text+" my unit";
};
chart.addAxis("x", { labelFunc: myLabelFunc });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励