純JavaScript圖表組件dhtmlxChart
dhtmlxChart也是一款基于JavaScript的图表应用组件，和之前分享的 路径需要你自己修改。 另外dhtmlxChart提供了4种数据源格式，支持XML、JSON、CSV以及JS数组，以XML为例： 这里就使用了json的数据格式。 效果图如下： 效果图如下： 效果图如下： 其他类型的图表使用也是类似，dhtmlxChart最大的特点还是支持大部分流行的数据格式作为图表的数据，这样我们开发者使用起来非常方便，大家可以尝试一下dhtmlxChart的开源免费版本。 本文链接：http://www.codeceo.com/article/javascript-dhtmlxchart.htmlwindow.onload = function(){ var barChart = new dhtmlXChart({
view:"bar",
container:"chartDiv",
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");
}
dhtmlxChart雷达点图生成
var chart = new dhtmlXChart({
container:"chartDiv",
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:"chartDiv",
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");
本文作者：码农网 – 小峰
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
