Use of ichartjs plug-in

Time:2022-5-25

Pie chart, column chart, ring chart, etc. may be used in the project. Ichartjs is a very good plug-in with small volume, which only needs to be introducedichart.1.2.1.min.jsTo meet the basic requirements, the GitHub download address is:https://github.com/wanghetommy/ichartjs

Let’s first look at a rendering:

1、 Introduceichart.1.2.1.min.jsAnd jQuery:

iChart

2、 Required data (JSON array):

var data = [
    {Name: 'UC browser', value: 40.0, color: '#4572a7'},
    {Name: 'QQ browser', value: 37.1, color: '#aa4643'},
    {Name: 'oupeng browser', value: 13.8, color: '#89a54e'},
    {Name: 'Baidu browser', value: 1.6, color: '#80699b'},
    {Name: 'Dolphin Browser', value: 1.4, color: '#92a8cd'},
    {Name: 'daily browser', value: 1.2, color: '#db843d'},
    {Name: 'other', value: 4.9, color: '#a47d7c'}
];

3、 In this example, use chart.2d to create a circular object:

var chart = new iChart.Donut2D({
                Render: 'canvasdiv', // bound tag ID
                Data: data, // data
                Title: {// Title            
                    Text: 'market share of China's third-party mobile browser in the third quarter of 2012',
                    color: '#3e576f'
                },
                Footnote: {// footer    
                    text: 'ichartjs.com',
                    color: '#486c8f',
                    fontsize: 11,
                    padding: '0 38'
                },
                Center: {// text in the middle of the ring chart      
                    text: '90%',
                    color: '#3e576f',
                    shadow: true,
                    shadow_blur: 2,
                    shadow_color: '#557797',
                    shadow_offsetx: 0,
                    shadow_offsety: 0,
                    fontsize: 40
                },
                sub_option: {
                    Label: {// label
                        background_color: null,
                        Sign: true, // set the small icon enabling label
                        padding: '0 4',
                        border: {
                            enable: false,
                            color: '#666666'
                        },
                        fontsize: 15,
                        fontweight: 600,
                        color: '#4572a7'
                    },
                    border: {
                        width: 2,
                        color: '#ffffff'
                    }
                },
                Shadow: true, // open reference
                shadow_blur: 6,
                shadow_color: '#aaaaaa',
                shadow_offsetx: 0,
                shadow_offsety: 0,
                background_color: '#fefefe',
                offset_ Angle: - 120, // offset 120 degrees counterclockwise
                Showpercent: false, // closing percentage
                Decimalsnum: 2, // decimal places
                width: 800,
                height: 400,
                radius: 120
            });

4、 Open drawing:

chart.draw();

Full code:

iChart
    
    
    


    
 
    
    
        $(function () {
 
            var data = [
                        {Name: 'UC browser', value: 40.0, color: '#4572a7'},
				        	{Name: 'QQ browser', value: 37.1, color: '#aa4643'},
				        	{Name: 'oupeng browser', value: 13.8, color: '#89a54e'},
				        	{Name: 'Baidu browser', value: 1.6, color: '#80699b'},
				        	{Name: 'Dolphin Browser', value: 1.4, color: '#92a8cd'},
				        	{Name: 'daily browser', value: 1.2, color: '#db843d'},
				        	{Name: 'other', value: 4.9, color: '#a47d7c'}
            ];
 
 
            var chart = new iChart.Donut2D({
                Render: 'canvasdiv', // bound tag ID
                Data: data, // data
                Title: {// Title            
                    Text: 'market share of China's third-party mobile browser in the third quarter of 2012',
                    color: '#3e576f'
                },
                Footnote: {// footer    
                    text: 'ichartjs.com',
                    color: '#486c8f',
                    fontsize: 11,
                    padding: '0 38'
                },
                Center: {// text in the middle of the ring chart      
                    text: '90%',
                    color: '#3e576f',
                    shadow: true,
                    shadow_blur: 2,
                    shadow_color: '#557797',
                    shadow_offsetx: 0,
                    shadow_offsety: 0,
                    fontsize: 40
                },
                sub_option: {
                    Label: {// label
                        background_color: null,
                        Sign: true, // set the small icon enabling label
                        padding: '0 4',
                        border: {
                            enable: false,
                            color: '#666666'
                        },
                        fontsize: 15,
                        fontweight: 600,
                        color: '#4572a7'
                    },
                    border: {
                        width: 2,
                        color: '#ffffff'
                    }
                },
                Shadow: true, // open reference
                shadow_blur: 6,
                shadow_color: '#aaaaaa',
                shadow_offsetx: 0,
                shadow_offsety: 0,
                background_color: '#fefefe',
                offset_ Angle: - 120, // offset 120 degrees counterclockwise
                Showpercent: false, // closing percentage
                Decimalsnum: 2, // decimal places
                width: 800,
                height: 400,
                radius: 120
            });
 
            chart.draw();
        })

Reproduced in: https://blog.csdn.net/qq_39306736