650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/13231L648-0.png "width =" 562 "height =" 364 "/>
Wijmo's CompositeChart control allows you to use a Chart to analyze and present complex data. Different visualization effects can be used for the same data, and different chart types are displayed in One chart, so that users can understand the content expressed by this data set from different perspectives.
This article describes how to use the Wijmo CompositeChart control to create a composite chart. CompositeChart API: http://wijmo.com/wiki/index.php/Compositechart,Wijmo CompositeChart to simplify, the traditional Excel like chart in the three areas: Plot Area, Legend Area, Label Area, separated into a simpler API: SeriesList, Legend, axis and Hint make it easier for developers to understand and use them.
Wijmo's CompositeChart relies on the following five core JavaScript libraries:
Raphael. js
Globalize. min. js
Jquery. ui. widget. js
Jquery. wijmo. raphael. js
Jquery. wijmo. wijchartcore. js
If you want to add other types of charts, you need to introduce JavaScript libraries of other Chart types. This allows developers to flexibly customize and crop JavaScript libraries suitable for their own use cases. For example, this example uses PieChart, BarChart, and LineChart. The introduced JavaScript library is as follows:
Jquery-1.7.1.min.js
Jquery-ui-1.8.18.custom.min.js
Globalize. min. js
Raphael-min.js
Jquery. wijmo. raphael. js
Jquery. wijmo. wijchartcore. js
Jquery. wijmo. wijbarchart. js
Jquery. wijmo. wijpiechart. js
Jquery. wijmo. wijlinechart. js
Jquery. wijmo. wijcompositechart. js
Write the code and set the Chart:
- $(document).ready(function () {
-
- $("#wijcompositechart").wijcompositechart({
-
- axis: {
-
- y: {
-
- text: "Total Hardware"
-
- },
-
- x: {
-
- text: ""
-
- }
-
- },
-
- stacked: false,
-
- hint: {
-
- content: function () {
-
- return this.label + '\n ' + this.y + '';
-
- }
-
- },
-
- header: {
-
- text: "Hardware Distribution"
-
- },
-
- seriesList: [{
-
- type: "column",
-
- label: "West",
-
- legendEntry: true,
-
- data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
-
- }, {
-
- type: "column",
-
- label: "Central",
-
- legendEntry: true,
-
- data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
-
- }, {
-
- type: "column",
-
- label: "East",
-
- legendEntry: true,
-
- data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
-
- }, {
-
- type: "pie",
-
- label: "asdfdsfdsf",
-
- legendEntry: true,
-
- center: { x: 150, y: 150 },
-
- radius: 60,
-
- data: [{
-
- label: "MacBook Pro",
-
- legendEntry: true,
-
- data: 46.78,
-
- offset: 15
-
- }, {
-
- label: "iMac",
-
- legendEntry: true,
-
- data: 23.18,
-
- offset: 0
-
- }, {
-
- label: "MacBook",
-
- legendEntry: true,
-
- data: 20.25,
-
- offset: 0
-
- }]
-
- }, {
-
- type: "line",
-
- label: "Steam1",
-
- legendEntry: true,
-
- data: {
-
- x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
-
- y: [3, 6, 2, 9, 5]
-
- },
-
- markers: {
-
- visible: true,
-
- type: "circle"
-
- }
-
- }, {
-
- type: "line",
-
- label: "Steam2",
-
- legendEntry: true,
-
- data: {
-
- x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
-
- y: [1, 3, 4, 7, 2]
-
- },
-
- markers: {
-
- visible: true,
-
- type: "tri"
-
- }
-
- }
-
- ]
-
- });
-
- });
If there is not much code, it will have the following effect:
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" 1 "border =" 0 "alt =" 1 "src =" http://www.bkjia.com/uploads/allimg/131228/13231J617-1.png "width =" 768 "height =" 495 "/>
There are not many codes, so it is easy to analyze:
- --
-
- Axis :{
-
- Y :{
-
- Text: "Total Hardware"
-
- },
-
- X :{
-
- Text :""
-
- }
-
- --
-
- Set the X and Y axes.
-
- ---
-
- Stacked: false
-
- ---
-
- Set Bar to non-stacked.
-
- ---
-
- Hint :{
-
- Content: function (){
-
- Return this. label + '\ n' + this. y + '';
-
- }
-
- },
-
- ---
-
- Set the mouse Tooltip.
-
- ---
-
- Header :{
-
- Text: "Hardware Distribution"
-
- },
-
- ---
-
- Set the chart header.
-
- ----
-
- SeriesList :[{
-
- Type: "column ",
-
- Label: "West ",
-
- LegendEntry: true,
-
- Data: {x: ['your tops', 'notebooks ', 'aio', 'tablets', 'phones'], y: [5, 3, 4, 7, 2]}
-
- },{
-
- Type: "column ",
-
- Label: "Central ",
-
- LegendEntry: true,
-
- Data: {x: ['your tops', 'notebooks ', 'aio', 'tablets', 'phones'], y: [2, 2, 3, 2, 1]}
-
- },{
-
- Type: "column ",
-
- Label: "East ",
-
- LegendEntry: true,
-
- Data: {x: ['your tops', 'notebooks ', 'aio', 'tablets', 'phones'], y: [3, 4, 4, 2, 5]}
-
- },{
-
- Type: "pie ",
-
- Label: "asdfdsfdsf ",
-
- LegendEntry: true,
-
- Center: {x: 150, y: 150 },
-
- Radius: 60,
-
- Data :[{
-
- Label: "MacBook Pro ",
-
- LegendEntry: true,
-
- Data: 46.78,
-
- Offset: 15
-
- },{
-
- Label: "iMac ",
-
- LegendEntry: true,
-
- Data: 23.18,
-
- Offset: 0
-
- },{
-
- Label: "MacBook ",
-
- LegendEntry: true,
-
- Data: 20.25,
-
- Offset: 0
-
- }]
-
- },{
-
- Type: "line ",
-
- Label: "Steam1 ",
-
- LegendEntry: true,
-
- Data :{
-
- X: ['users' tops ', 'notebooks', 'aio ', 'tablets', 'phones'],
-
- Y: [3, 6, 2, 9, 5]
-
- },
-
- Markers :{
-
- Visible: true,
-
- Type: "circle"
-
- }
-
- },{
-
- Type: "line ",
-
- Label: "Steam2 ",
-
- LegendEntry: true,
-
- Data :{
-
- X: ['users' tops ', 'notebooks', 'aio ', 'tablets', 'phones'],
-
- Y: [1, 3, 4, 7, 2]
-
- },
-
- Markers :{
-
- Visible: true,
-
- Type: "tri"
-
- }
-
- }
-
- ]
----
Set the SeriesList. For each Series, you can set its type, label, legendEntry, data, and other attributes. SeriesStyles and SeriesHoverStyles can be set for Series, such:
- seriesStyles: [{
-
- fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8
-
- }],
-
- seriesHoverStyles: [{
-
- "stroke-width": "1.5", opacity: 1
-
- }]
After the above settings, this CompositeChart is set. You can also dynamically bind the Json data returned by the Server to generate a Chart.
Click here to download the instance code in this article.
Download Wijmo. Please goStudio for ASP. NET Wijmo 2012 v1 officially released 2012.03.22 )!
This article from the "grape city control blog" blog, please be sure to keep this source http://powertoolsteam.blog.51cto.com/2369428/857471