欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

纯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种数据源格式,支持XMLJSON、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的数据格式。

效果图如下:

纯JavaScript图表组件dhtmlxChart的示例代码

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");

效果图如下:

纯JavaScript图表组件dhtmlxChart的示例代码

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");

效果图如下:

纯JavaScript图表组件dhtmlxChart的示例代码

其他类型的图表使用也是类似,dhtmlxChart最大的特点还是支持大部分流行的数据格式作为图表的数据,这样我们开发者使用起来非常方便,大家可以尝试一下dhtmlxChart的开源免费版本。

以上就是纯JavaScript图表组件dhtmlxChart的示例代码的详细内容,更多请关注其它相关文章!