Mvc4+easyui-based Web development Framework Experience Summary (4)--Using the chart control Highcharts

When we do a variety of applications, we may use to chart statistics, previously exposed to a number of different chart controls, inadvertently discovered the chart control Highcharts, its powerful features and rich interactive effect, unforgettable. This article mainly introduces the use of chart control highcharts in Web development, as well as the unification of Chinese and other operations, so that our program functions richer, more beautiful content.

1, Highcharts Basic Introduction

Highcharts is a very popular and beautiful interface of pure JavaScript Chart library. It mainly consists of two parts: Highcharts and Highstock. Highcharts can provide intuitive, interactive charts for your website or Web application. Currently supports lines, splines, area, areaspline, column charts, bar charts, pie charts and scatter chart types. Highstock can easily create stock or general timeline charts for you. It includes advanced navigation options, preset date ranges, date selectors, scrolling and pan, and more.

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

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

Highcharts support graph, pie chart, histogram, gauge chart, scatter chart and so on dozens of kinds of graphics, interface display is very rich, 3D effect is also very good-looking. List a few for reference.

Highcharts uses JavaScript frameworks such as jquery to handle basic JavaScript tasks. Therefore, you need to refer to these script files at the head of the page before using Highcharts. If you use jquery as the basic framework, then you need to refer to both jquery and hightcharts two files on the head of the page.

Because I am in the Web development Framework, the main use of the Mvc+easyui way, because the file contains the following is shown.

@* Add Jquery,easyui and Easyui to the language pack's JS file *@<Scripttype= "Text/javascript"src= "~/content/jqueryeasyui/jquery.min.js"></Script>    <Scripttype= "Text/javascript"src= "~/content/jqueryeasyui/jquery.easyui.min.js"></Script>    <Scripttype= "Text/javascript"src= "~/content/jqueryeasyui/locale/easyui-lang-zh_cn.js"></Script>@* Chart js file application *@<Scriptsrc= "~/content/jquerytools/highcharts/js/highcharts.js"></Script>

But for a better display, we typically add an icon with a predefined style in it, and add the script for the export function as shown below.

@* Chart js file application *@<Scriptsrc= "~/content/jquerytools/highcharts/js/highcharts.js"></Script>    <Scriptsrc= "~/content/jquerytools/highcharts/js/modules/exporting.js"></Script>    <Scriptsrc= "~/content/jquerytools/highcharts/js/themes/grid.js"></Script>

Of course, if we scatter plots, 3D graphics and other content, but also need to introduce some additional JS file

    <src= "~/content/jquerytools/highcharts/js/highcharts-more.js"></  script>    <src= "~/content/jquerytools/ Highcharts/js/highcharts-3d.js "></script>

2, the chart generation operation

As I said earlier, this chart control is mostly implemented using jquery and JavaScript, and we'll analyze the demo code for the next pie chart.

$(function () {    $(' #container '). Highcharts ({chart: {plotbackgroundcolor:NULL, Plotborderwidth:NULL, Plotshadow:false}, Title: {text:' Browser shares at a specific website, 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:' Browser share ', data: [[' Firefox ', 45.0],                [' IE ', 26.8], {name:' Chrome ', y:12.8, sliced:true, selected:true                },                [' Safari ', 8.5],                [' Opera ', 6.2],                [' Others ', 0.7]            ]        }]    });});

The above script is mainly based on the data inside the series property to generate pie chart, then we actually developed, the data is certainly not fixed, generally we are in the dynamic way to assign value.

As I tend to use jquery Ajax way, call backstage to get the data, and then bound. So in this case, how to manipulate the script, let's look at the analysis.

First, we first initialize a chart object inside the script function, and set the data in the series to null.

            varChart1 =NewHighcharts.chart ({Chart: {renderto:"Container1", Plotbackgroundcolor:NULL, Plotborderwidth:NULL, Plotshadow:false,}, Title: {text:' Composition of the group's molecular staff '}, tooltip: {pointformat:' {series.name}: <b>{point.y}</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 '                            }                        },                        //showinlegend:true}}, series: [{type: ' Pie ', Name: ' Number of personnel ' , data: []}] });

The second step is to call the background connection through Ajax to get the data, and then bind to the specific properties on it, the specific code is as follows.

            //Get graph 1 data from Ajax$.ajaxsettings.async =false; varData1 = []; $.getjson ("/user/getcompanyusercountjson",function(dict) { for(varKeyinchdict) {                    if(Dict.hasownproperty (key)) {Data1.push ([key, Dict[key]]);                }                }; chart1.series[0].setdata (DATA1); });

The HTML code of the chart is as follows, the main thing is to add a div,id to Container1, to place the chart.

                             <Divclass= "box">                                 <Divclass= "Box-title">                                     <Divstyle= "Float:left">                                         <imgsrc= "~/content/jqueryeasyui/themes/icons/customed/user.png"alt=""width= " the"Height= " the" />Chart 1</Div>                                     <Divstyle= "float:right; padding-right:10px;">More</Div>                                 </Div>                                 <Divclass= "Box-content"style= "height:310px">                                      <Div  id= "Container1"  style= "height:300px;max-width:500px "></div>                                  </Div>                             </Div>

Complete the above code, we can run to see the following graphics, so it seems to be more cool.

3, the export function of the chart and the menu of Chinese

See from the above chart, each chart in the upper right corner, there is a menu function, there are some functions, such as printing pictures, export pictures and other operations, the specific menu performance as shown below.

But the above menu style I passed the Chinese processing, the default display effect is in English, as shown below.

Obviously the English menu, is not what we want, we need to be a better Chinese, then how to the General menu on the above, need each module is repeated the same Chinese, of course, no need. We can put it in the global settings.

Before we introduced, in order to make the chart show a better effect, we included a grid.js chart style, in fact there are other styles can be used, but I think the grid.js style is the best, as shown below.

Now that we have used this style setting, we can put some of the global settings, such as the Chinese operation, also here.

We at the bottom of this file, add a setoption operation code can, these Chinese menu, because I use the latest version, some parameters are inconsistent with the old version, so directed at this hard, should recommend encouragement under OH. Oh

Set the code for the Chinese. as shown below.

 //  Apply the theme  Span style= "Color:rgb (0, 0, 255); >var  highchartsoptions = Highcharts.setoptions (highcharts.theme);   Chinese chart menu  highcharts.setoptions ({lang: {contextbuttontitle:  "Chart menu" , Printchart:  print picture  "download jpeg picture" , downloadpdf:  "Download PDF document" " Download png picture "" Export picture "