Home > Web Front-end > JS Tutorial > body text

Sample code of pure JavaScript chart component dhtmlxChart

黄舟
Release: 2017-03-16 14:39:55
Original
1510 people have browsed it

PureJavaScriptSample code of chart component dhtmlxChart

dhtmlxChart is also a JavaScript-based Chart application component, similar to xCharts shared before, dhtmlxChart also provides a very rich chart type. It should be said that compared with xCharts, it provides more chart types, including pie charts, radar charts, Discrete point plots and more complex chart types. dhtmlxChart provides an open source version, but its commercial version costs more than $49, which is a bit expensive.

Configuration of dhtmlxChart

Quote the related js scripts and css files of dhtmlx on the page to complete the installation:

<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
Copy after login

The path needs to be modified by yourself.

In addition, dhtmlxChart provides 4 data source formats, supporting XML, JSON, CSV and JSarray, taking XML as an example:

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");
	}
Copy after login

dhtmlxChart column chart generation

window.onload = function(){
	var barChart1 =  new dhtmlXChart({
		view:"bar",
		container:"chart1",
	    value:"#sales#",
        label:"&#39;#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:"&#39;#year#",
        color:"#66ccff",
        gradient:"rising",
        barWidth:25,
        padding:{
            top:50,
            bottom:0,
            right:50,
            left:50
        }
	});
	barChart2.parse(dataset,"json");
	}
Copy after login

The json data format is used here.

The rendering is as follows:

##dhtmlxChart radar point chart generation

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");
Copy after login

The rendering is as follows:

dhtmlxChart discrete point chart generation

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");
Copy after login
The rendering is as follows:

The use of other types of charts is similar. The biggest feature of dhtmlxChart is still It supports most popular data formats as chart data, which makes it very convenient for our developers to use. You can try the open source free version of dhtmlxChart.

The above is the detailed content of Sample code of pure JavaScript chart component dhtmlxChart. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template