纯JavaScript图表组件dhtmlxChart的示例代码
dhtmlxchart也是一款基于javascript的图表应用组件，和之前分享的xcharts类似，dhtmlxchart也提供了非常丰富的图表类型，应该说和xcharts相比，它提供的图表类型更多，包括饼图、雷达图、离散点图和更复杂的图表类型。dhtmlxchart提供了开源的版本，但它的商业版需要49美元以上，有点小贵。
dhtmlxChart的配置
在页面上引用dhtmlx的相关js脚本和css文件即可完成安装：
路径需要你自己修改。
另外dhtmlxChart提供了4种数据源格式，支持XML、JSON、CSV以及JS数组，以XML为例：
window.onload = function(){
var barChart = new dhtmlXChart({
view:"bar",
container:"chartp",
value:"#sales#",
gradient:"falling",
color:"#b9a8f9",
radius:0,
alpha:0.5,
border:true,
width:70,
xAxis:{
template:"#year#"
},
yAxis:{
start:0,
end:100,
step:10,
template:function(obj){
return (obj%20?"":obj)
}
}
})
barChart.load("../common/data.xml");
}dhtmlxChart柱形图生成
window.onload = function(){
var barChart1 = new dhtmlXChart({
view:"bar",
container:"chart1",
value:"#sales#",
label:"'#year#",
barWidth:35,
radius:0,
gradient:"rising"
})
barChart1.parse(dataset,"json");
barChart1.attachEvent("onItemClick",function(id){alert(id)})
var barChart2 = new dhtmlXChart({
view:"bar",
container:"chart2",
value:"#sales#",
label:"'#year#",
color:"#66ccff",
gradient:"rising",
barWidth:25,
padding:{
top:50,
bottom:0,
right:50,
left:50
}
});
barChart2.parse(dataset,"json");
}这里就使用了json的数据格式。
立即学习“Java免费学习笔记（深入）”；
效果图如下：
dhtmlxChart雷达点图生成
var chart = new dhtmlXChart({
container:"chartp",
view:"radar",
value:"#companyA#",
disableLines:true,
item:{
borderWidth:0,
radius:2,
color: "#6633ff"
},
xAxis:{
template:"#month#"
},
yAxis:{
lineShape:"arc",
bg:"#fff8ea",
template:function(value){
return parseFloat(value).toFixed(1)
}
}
});
chart.parse(companies,"json");效果图如下：
dhtmlxChart离散点图生成
chart = new dhtmlXChart({
view:"scatter",
container:"chartp",
value:"#b#",
xValue: "#a#",
yAxis:{
title:"Value B"
},
xAxis:{
title:"Value A"
},
tooltip:{
template:"#a# - #b#"
},
item:{
radius:5,
borderColor:"#f38f00",
borderWidth:1,
color:"#ff9600",
type:"d",
shadow:true
}
});
chart.parse(scatter_dataset,"json");效果图如下：
其他类型的图表使用也是类似，dhtmlxChart最大的特点还是支持大部分流行的数据格式作为图表的数据，这样我们开发者使用起来非常方便，大家可以尝试一下dhtmlxChart的开源免费版本。
