New features of the dojo 1.6 chart Library

In the just-released dojo1.6, the dojo charting library has added many new features in addition to further improving stability. Let's take a look!

 

1. Mesh chart)

A mesh chart is a common chart type. It is most suitable for comparing multiple objects with specified attributes, for example, the comparison of several basketball clubs in terms of operating conditions, player ability, coach level, market scale, and other indicators.

 

 

Usage:

 

You do not need to add axes when declaring a mesh chart compared to other charts. The sample code is as follows:

 

<! -- Div container of the chart control --> <br/> <Div id = "chart" style = "width: 500px; Height: 400px; "> </div> <br/>... <br/> dojo. require ("dojox. charting. chart "); <br/> dojo. require ("dojox. charting. plot2d. spider "); <br/> dojo. require ("dijit. tooltip "); <br/> var chart = new dojox. charting. chart ("chart"); <br/> chart. addplot ("default", {<br/> type: "Spider", <br/> divisions: 7, <br/>}); <br/> chart. addseries ("China", {data: {"GDP": 2, "region": 6, "Population": 2000, "inflation": 15, "Growth ": 12 }}, {fill: "blue"}); <br/> chart. addseries ("France", {data: {"GDP": 6, "area": 15, "Population": 500, "inflation": 5, "Growth ": 6 }},{ fill: "red"}); <br/> chart. addseries ("USA", {data: {"GDP": 3, "area": 20, "Population": 1500, "inflation": 10, "Growth ": 3 }},{ fill: "green"}); <br/> chart. addseries ("Japan", {data: {"GDP": 4, "area": 2, "Population": 1000, "inflation": 20, "Growth ": 2 }},{ fill: "yellow"}); <br/> chart. addseries ("Korean", {data: {"GDP": 10, "area": 10, "Population": 800, "inflation": 2, "Growth ": 18 }},{ fill: "orange"}); <br/> chart. addseries ("Canada", {data: {"GDP": 1, "area": 18, "Population": 300, "inflation": 3, "Growth ": 15 }},{ fill: "Purple"}); <br/> chart. render ();

 

The coordinate axes are not required for a mesh chart. The accuracy of the scale is determined by the divisions parameter. The divisions parameter in the code above is 7, indicating that all the scale is divided into seven small scales.

 

Grid chart scale axis:

 

2. Interactive legends (selectable legend)

In the newly released chart control library, a major improvement is to provide interactive Legends For All chart controls, you can click the check box before the legend to display or hide the corresponding chart data. Interactive legends also provide the ability to highlight corresponding chart data through legends. Interactive legends allow you to view the data you are concerned about in a large number of chart data.

 

ABC chart data is displayed at the same time:

 

BC data is hidden:

 

Usage:

 

Interactive legends can be added in a similar way as common chart legends:

 

<! -- Legend container --> <br/> <Div id = "legend"> </div> <br/> var legend = new dojo. charting. widget. selectablelegend ({chart: Chart, horizontal: true}, "legend ");

 

 

3. New pie chart label (smart pie label)

In pie charts before 1.6, labels often overlap with each other, making them completely invisible. The new version 1.6 chart Library provides a new label Arrangement Method for a pie chart-column alignment. The corresponding labels are aligned on both sides of the pie chart, this avoids overlapping tags.

 

The pie chart labels before dojo1.6:

 

 

Dojo1.6 pie chart labels:

 

 

It is also easy to align the pie chart labels by column. You only need to add labelstyle: "columns" to the Declaration.

 

Chart. addplot ("default", {<br/> type: "pie", <br/> labelstyle: "columns", <br/> fontcolor: "# CCC ", <br/> labelwiring: "# CCC", <br/> radius: 100, <br/> }). addseries (...). render ().

 

The labelwiring in the above code is used to define the color of the link between the label and the pie chart.

 

 

4. chart title and axis title (chart title & axis title)

The title of a chart and the title of the coordinate axis are commonly used. The chart Library also supports titles in 1.6 and can customize the title Position and style.

 

Chart title:

How to add a chart title:

 

<! -- Chart container --> <br/> <Div id = "chart"> </div> <br/>... <br/> var chart = new dojox. charting. chart ("chart", {Title: "production (ton)"}); <br/> chart. addplot (...). addaxis (...). addseries (...). render ();

 

 

 

Axis title:

How to add the axis title:

 

Chart. addaxis ("X", {<br/> // axis title parameter <br/> title: "quarter of 2010", <br/> titlegap: 15, <br/> titlefontcolor: "orange", <br/> titleorientation: orientation, <br/> labels: [<br/> {value: 0, text :""}, <br/> {value: 1, text: "1 QTR" },< br/> {value: 2, text: "2 QTR "}, <br/> {value: 3, text: "3 QTR" },< br/> {value: 4, text: "4 QTR "}, <br/> {value: 5, text: "end"} <br/>] <br/> })

 

There are two parameters to explain: titlegap and titleorientation; titlegap are used to define the distance between the title and the corresponding coordinate axis, while titleorientation has two optional values: "axis" and "away ":

 

Titleorientation: "axis" (the coordinate axis is at the top)

 

 

Titleorientation: "away" (at the bottom of the axis)

 

5. Label shortening)

Labels on the ruler are long and prone to overlapping tags. In this case, the chart library of dojo1.6 provides the label scaling function to scale the label that exceeds the specified length, and then add a tooltip to the scaled label. When you move the mouse up, the complete label is displayed.

 

Scaling label Configuration:

 

Addaxis ("X", {<br/> labels: [<br/> {value: 0, text: "First start point"}, <br/> {value: 2, text: "Two" },< br/> {value: 5, text: "last end point" }< br/>], <br/> maxlabelsize: 20, <br/> trailingsymbol :"... "<br/> })

 

The unit of maxlabelsize is PX, and trailingsymbol is used to indicate the scaled part of the long tag.

 

In addition to using scaling labels to prevent tag overlap, there is also a good practice-rotating tags can also prevent overlap, and it is more intuitive, however, the entire chart takes up more space. You can select a solution based on the actual situation. The tag rotation function is provided in dojo1.5.

 

The chart Library also has many enhancements in dojo1.6, which need to be explored together!