Using jquery's Highcharts plugin to make icons how to bind data

Razor syntax based on MVC to implement data binding for Highcharts chart plug-ins

1. Referencing several library files

<script src= "~/scripts/jquery-1.8.2.min.js" ></script>    <script src= "~/scripts/highcharts/ Highcharts.js "></script>    <script src=" ~/scripts/highcharts/exporting.js "></script>    <script src= "~/scripts/highcharts/gray.js" ></script>

2.Html create a new div and take an ID

<div id= "Container" style= "min-width:310px; height:400px; margin:0 Auto "></div>

3. Write JS (This section can be copied to the official website, and then slightly modified on the line)

$ (function () {$ (' #container '). Highcharts ({chart: {type: ' column ')                    }, Title: {text: ' title '}, subtitle: { Text: ' source:http://www.cnblogs.com/sunshine-wy/'}, Xaxis: {cat Egories: @ViewBag. Databuytime}, YAxis: {min:0, titl                    E: {text: ' Number '}}, tooltip: { Headerformat: ' <span style= ' font-size:10px ' >{point.key}</span><table> ', pointfor Mat: ' <tr><td style= ' color:{series.color};p adding:0 ">{series.name}: </td> ' + ' &lt TD style= "padding:0" ><b>{point.y:.1f} </b></td></tr> ', Footerformat: ' <            /table> ',        Shared:true, Usehtml:true}, Plotoptions: {                Column: {pointpadding:0.2, borderwidth:0}                    }, Series: [{name: ' purchased Apple ', data: @ViewBag. databuysum                    }, {name: ' No broken Quantity ', data: @ViewBag. datatruesum        }]            });    }); </script>

4. Get the data source in the background and return

Public ActionResult Index ()        {            var strbuysum = "";            foreach (var item in _rdb. Getresumedeliverysum (). ToList ())            {                Strbuysum + = @item. Buysum + ",";            };            Strbuysum = strbuysum.substring (0, strbuysum.length-1);            Strbuysum = string. Concat (' [', Strbuysum, '] ');            Viewbag.databuysum = strbuysum;            return View ();        }

The final step is the most critical step, mainly the processing of the returned data. It is also possible to use Ajax at the front desk, but it is recommended to dispose of it in the background without having to load the interface and run over the request again.

Tell me how you feel! This thing leisurely to do for one weeks, first found the plug-in found the official website and then look at the API document, copy code to the compiler to see the results of the test, basically the same, the style does not like to have turned over the document changed the reference file, and then more beautiful.

Before a colleague used this, read his blog to turn to the plug-in, basically explain the more detailed, so easy to get started. But consider their own needs are not enough, the blog did not elaborate on how to dynamically load data, so there is to Baidu, read other people's blog, but still did not come out, the data format for a time to get stuck. This is probably the most painful!

Of course, God for you to close a door when also open a window for you, went to the blog Park ask questions, well, each way Daniel has a weapon, (the technology is a bit of food some Daniel to the idea is difficult to achieve), and finally received a more suitable for me to understand the answer to digest, one at a time solved the problem of data format Then the back of the way to follow this idea is all out! It's great, isn't it?

The process of sharing knowledge is undoubtedly joyful, along the way, some people will take you, colleagues or friends, this atmosphere may affect it, persist, and so on, after a number of years, you may also like now they preach to teach you, then you will see them have their own sentimental shadow, Must be a kind of inexplicable touch!

--------------------------------------------------------------------------------------------------------------

Attach a sample diagram for everyone to look at:

Using jquery's Highcharts plugin to make icons how to bind data