Highcharts Chart. NET version open source, support WebForm and MVC3, fully open source

Highcharts is a pure JavaScript class library that makes charts, with the following key features:

• Compatibility: Compatible with all today's browsers, including iphone, IE and Firefox, etc.;

• Completely free for individual users;

• Pure JS, no BS;

• Support most of the chart types: line graph, graph, area chart, area graph, histogram, pie chart, scatter chart;

• Cross-language: Whether PHP, ASP, or Java is available, it requires only three files: one is the core file of Highcharts Highcharts.js, and a canvas emulator for IE and jquery class library or MooTools class library;

• Hint function: The mouse moves to a point on the chart has the prompt information;

• Zoom in: Select the chart section to enlarge, close up to observe the chart;

• Ease of use: no need for special development skills, only need to set a few options to create a suitable chart;

• Timeline: can be accurate to milliseconds

Download Plugin

Highcharts

Http://www.highcharts.com/download

Jquery

http://jquery.com/

1. Scripts to be introduced

<script src= ". /.. /scripts/jquery-1.5.1.min.js "type=" Text/javascript "></script><script src=". /.. /content/highcharts-3.0.9/js/highcharts.js "type=" Text/javascript "></script><script src=". /.. /content/highcharts-3.0.9/js/modules/exporting.js "type=" Text/javascript "></script><script src=". /.. /content/highcharts-3.0.9/js/highcharts-more.js "type=" Text/javascript "></script>

2. Front-end display clips

        $ (' #canvasDiv '). Highcharts ({             chart: {                 type:  ' @Model [0]. Type '             },             title: {                 text:   ' @Model [0]. Title '             },             subtitle: {                 text:  ' @Model [0]. Subtitle '             },             xaxis: {                 categories:  @Html. Raw (Model[0]. Xaxis.categoriesjson)             },             yAxis: {                 title: {                     text:  ' @Model [0]. Yaxis.title '                 },                 labels: {                      formatter: function  ()  {                         return this.value +  ' Times '                      }                 }            } ,            tooltip: {                 crosshairs: true,                 shared: true             },             plotOptions: {                 spline: {                     marker: {                         radius: 4,                          lineColor:  ' #666666 ',                         linewidth:  1                     }                 }            },             series:  @Html. Raw (Model[0]. Seriesjson)         });

3. Controller data Binding Fragment

　　

The demo works as follows:

Implementation code is all open source

GitHub

Https://github.com/cheng5x/YcHighCharts

Oschina.net:

Http://git.oschina.net/cheng5x/YcHighCharts

Highcharts Chart. NET version open source, support WebForm and MVC3, fully open source