Use of the hightchart icon Control

Basic Introduction:

Highcharts is a very popular pure JavaScript chart library with beautiful UI. It consists of two parts: highcharts and highstock. Highcharts provides intuitive and interactive charts for your website or web applications. Currently, line, spline, area, areaspline, bar chart, bar chart, pie chart, and scatter chart types are supported. Highstock allows you to easily create stock or general timeline charts. It includes advanced navigation options, preset date range, date selector, scroll and shift, etc.

Usage:

1. highcharts uses JavaScript frameworks such as jquery to process basic JavaScript tasks. Therefore, the jquery file must be referenced during use. The Referenced File is as follows:

<! -- Run under the jquery framework --> <SCRIPT src = "~ /Higthchart/jquery. Min. js "> </SCRIPT> <! -- Basic reference --> <SCRIPT src = "~ /Higthchart/highcharts. js "> </SCRIPT> <! -- Whether the export menu is displayed in the upper-right corner of the chart --> <SCRIPT src = "~ /Higthchart/exporting. js "> </SCRIPT> <! -- Added effects such as 3D and scatter plots --> <SCRIPT src = "~ /Higthchart/highcharts-3d.js "> </SCRIPT> <SCRIPT src = "~ /Higthchart/highcharts-more.js "> </SCRIPT> <! -- Specify charset = "gb2312" for the topic of the table to prevent chinese menus from garbled characters --> <SCRIPT charset = "gb2312" src = "~ /Higthchart/grid. js "> </SCRIPT>

2. load data when the page is loaded. The Code is as follows:

$ (Function () {$ ('# piecontainer '). highcharts ({chart: {plotbackgroundcolor: NULL, plotborderwidth: NULL, plotshadow: false}, Title: {text: 'diagram of the percentage of people in each project in 2014 '}, tooltip: {pointformat: '{series. name }:< B> {point. percentage :. 1f }%</B> '}, plotoptions: {pie: {allowpointselect: True, cursor: 'pointer', datalabels: {enabled: True, format: '<B> {point. name} </B>: {point. percentage :. 1f} % ', style: {color: (highcharts. theme & highcharts. theme. contrasttextcolor) | 'black' }}}, series: [{type: 'pie ', name: 'proportion', data: [['Project 1 ', 45.0], ['Project 2', 26.8], {Name: 'chromi', Y: 12.8, sliced: True, selected: true}, ['Project 3 ', 8.5], ['Project 4', 6.2], ['Project 5', 0.7]});}

We certainly need to dynamically load data during development. We can use jquery's Ajax method to obtain data in the background and then bind the data. How can we bind the data? Don't worry, see the following:

First, initialize a chart object and set the data related to series data to NULL:

VaR chart1 = new highcharts. chart ({chart: {renderto: "piecontainer", plotbackgroundcolor: NULL, plotborderwidth: NULL, plotshadow: false}, Title: {text: 'diagram of the proportion of the number of people in each project '}, tooltip: {pointformat: '{series. name }:< B> {point. percentage :. 1f }%</B> '}, plotoptions: {pie: {allowpointselect: True, cursor: 'pointer', datalabels: {enabled: True, format: '<B> {point. name} </B>: {point. percentage :. 1f} % ', style: {color: (highcharts. theme & highcharts. theme. contrasttextcolor) | 'black' }}}, series: [{type: 'pie ', name: 'proportion', data: []});

Then bind it:

        var data1 = [];        $.post("/Home/getChartData", function (json) {            $(json).each(function (index, item) {                data1.push([item.name, item.val]);            });            chart1.series[0].setData(data1);        });

 

3. The result of running the code is as follows. The interface is still cool.

4. Because the menu of the image is in English, you need to write it in Chinese. Just add the following code under the topic file:

Highcharts. setoptions ({LANG: {contextbuttontitle: "chart menu", printchart: "Print Image", downloadjpeg: "Download JPEG image", downloadpdf: "Download PDF Document", downloadpng: "Download PNG Image", downloadsvg: "Download SVG vector image", exportbuttontitle: "export image "}});

 

Highcharts Official Website: http://www.highcharts.com/

Highcharts Demo: http://www.highcharts.com/demo/