代码不多,就有了下图的功效:

--

axis: {

y: {

text: "Total Hardware"

},

x: {

text: ""

}

--

设置X,Y 轴。

---

stacked: false

---

设置Bar 为非stacked.

---

hint: {

content: function () {

return this.label + '\n ' + this.y + '';

}

},

---

设置鼠标 Tooltip.

---

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"

}

}

]

 

jquery.wijmo.wijcompositechart.js

$(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"

}

}

]

});

});

raphael.js

globalize.min.js

经过地点的安装,那么些CompositeChart就安装好了。也得以动用Server再次来到的
Json 数据动态绑定生成Chart。

写点代码,设置一下Chart :

jquery.wijmo.wijpiechart.js

seriesStyles: [{

fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8

}],

seriesHoverStyles: [{

"stroke-width": "1.5", opacity: 1

}]

 

 

raphael-min.js

jquery.wijmo.raphael.js

 

globalize.min.js

jquery.wijmo.wijchartcore.js

Wijmo的CompositeChart 正视于下边的那5个着力的JavaScript库:

jquery.wijmo.raphael.js

若是急需参与其余类型的Chart,须要再引入其他Chart类型的JavaScript库,那样可以使得开发者可以灵活定制并裁剪出适合本身用例的JavaScript库。例如本实例使用了
PieChart, BarChart, LineChart, 引入的JavaScript库如下:

点击那里下载,本文实例代码。

jquery.wijmo.wijbarchart.js

jquery.ui.widget.js

Wijmo的CompositeChart控件允许你使用一个Chart来分析和显示复杂的数额。相同的数额能够运用分歧的可视化效果,不一样的图样类型展现在一个图片内,使得用户可以从差其他角度,明白分析那组数据所发挥的内容

jquery.wijmo.wijchartcore.js

设置 SeriesList,各种Series 可以安装其type, label, legendEntry, data,
等等属性。 Series可以设置 SeriesStyles, 和 SeriesHoverStyles, 如:

 

代码不多,很好分析:

jquery-1.7.1.min.js

Wijmo下载,请进入Studio for ASP.NET Wijmo 2012
v1正式发表(2012.03.22翻新)!

图片 1

jquery-ui-1.8.18.custom.min.js

jquery.wijmo.wijlinechart.js

正文将介绍怎样使用Wijmo的CompositeChart控件,制作一个复合图表。CompositeChart
的API:http://wijmo.com/wiki/index.php/Compositechart,Wijmo
的CompositeChart 化繁为简,将价值观 Excel like图表中的三大区域: Plot Area,
Legend Area, Label Area, 分离成为进一步不难的API: SeriesList, Legend,
Axis, Hint, 使得开发者更是便于的敞亮和行使。


图片 2

相关文章

网站地图xml地图