纯JavaScript图表组件dhtmlxChart的示例代码
程序员文章站
2022-05-21 10:18:18
...
纯JavaScript图表组件dhtmlxChart的示例代码
dhtmlxChart也是一款基于JavaScript的图表应用组件,和之前分享的xCharts类似,dhtmlxChart也提供了非常丰富的图表类型,应该说和xCharts相比,它提供的图表类型更多,包括饼图、雷达图、离散点图和更复杂的图表类型。dhtmlxChart提供了开源的版本,但它的商业版需要49美元以上,有点小贵。
dhtmlxChart的配置
在页面上引用dhtmlx的相关js脚本和css文件即可完成安装:
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/> <script src="../../../codebase/dhtmlx.js"></script>
路径需要你自己修改。
另外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的数据格式。
效果图如下:
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的开源免费版本。
以上就是纯JavaScript图表组件dhtmlxChart的示例代码的详细内容,更多请关注其它相关文章!
上一篇: javascript学习笔记(七) js函数介绍_基础知识
下一篇: mysql关键字不区分大小写