Highcharts  是一个JS图表库，官方网站：

示例一：通过ajax请求获取json数据，然后通过  Highcharts   展示出来，部分代码如下：

下面前台HTML代码 ：

<

div 

id

="divMain"

 

>

        

<

div 

id

="divContainer"

 style

="min-width: 400; width:90%; min-height: 380px; margin: 0 auto"

>

        

</

div

>

 </div> 

 

下面是JS代码： 

function query() {

    

if (!checkBeforeQuery()) {

        

return 

false;

    }

    

var gChart;

    

var reqUrl = "/Sale/Product";

    

//

部门编码

    

var vDeptCode = jddlProductDept.find("option:selected").text();

    

//

产品编码

    

var vLineCode = jddlProductLine.find("option:selected").text();

    

if (vLineCode == "请选择") {

        vLineCode = "";

    }

    

//

款式编码

    

var vStyleCode = jtxtStyle.attr("code");

    

//

产品编码

    

var vProductCode = jtxtProduct.attr("code");

    

//

商品编码

    

var vSkuId = jtxtSKU.attr("code");

    

var vQueryDate = jdtQueryBeginDate.val();

    

var vExecDate = jdtExecBeginDate.val();

    $.wmspost({

        url: reqUrl,

        async: 

false,

        data: { deptCode: vDeptCode, lineCode: vLineCode, styleCode: vStyleCode,

            productCode: vProductCode, skuId: vSkuId,

            queryDate: vQueryDate, execDate: vExecDate

        },

        success: 

function (retData) {

            fillGrid(retData);

            

var arrCategory = []; 

//

月份

            

var arrSjxl = []; 

//

实际销量

            

var arrSjcxl = []; 

//

实际促销量

            $.each(retData, 

function (idx, item) {

                arrCategory.push(item.PredictedDate.substring(0, item.PredictedDate.lastIndexOf("/")));

                arrSjxl.push(item.ActualQty);

                arrSjcxl.push(item.PromotionQty); 

//

            });

            

//

divContainer 是div的id，该div用来显示图表

            

var vOption = createChartOption("divContainer", "line", "部门销售统计", 

null, "月份", "销量(件)");

            

//

X轴

            $.each(arrCategory, 

function (idx, item) {

                vOption.xAxis.categories.push(item);

            });

            

//

实际销量

            vOption.series.push(createSeries(arrSjcxl, "实际销量", "square"));

            

//

实际促销量

            vOption.series.push(createSeries(arrSjcxl, "实际促销量", "triangle"));

            

//

创建图表

            gChart = 

new Highcharts.Chart(vOption);

        },

        error: 

function (xhrObj, textStatus, errObj) {

        }

    });

}

function createSeries(arrData, seriesName, seriesSymbol) {

    

var objSeries = {

        name: seriesName,

        data: [],

        marker: {

            symbol: seriesSymbol

        }

    };

    $.each(arrData, 

function (idx, item) {

        objSeries.data.push(item);

    });

    

return objSeries;

}

function createChartOption(pRenderId,chartType,mainTitle,subTitle, xAxisTitle,yAxisTitle) {

    

var vOption = {

        chart: {

            renderTo: pRenderId,

            type: chartType,

            marginRight: 130,

            marginBottom: 25

        },

        title: {

            text: mainTitle

        },

        subtitle: {

            text: subTitle

        },

        xAxis: {

            title: {

                text: xAxisTitle

            },

            categories: []

        },

        yAxis: {

            title: {

                text: yAxisTitle

            },

            plotLines: [{

                value: 0,

                width: 1,

                color: "#808080"

            }]

        },

        tooltip: {

            crosshairs: 

true,

            shared: 

true

        },

        legend: {

            layout: "vertical",

            align: "right",

            verticalAlign: "top",

            x: -10,

            y: 100,

            borderWidth: 0,

            floating: 

true

        },

        plotOptions: {

            series: {

                cursor: "pointer",

                point: {

                    events: {

                        click: 

function () {

                            alert(

this.series.name + "=" + 

this.x + "=" + 

this.y);

                        }

                    }

                }

            }

        },

        series: []

    };

    

return vOption;

}