Highcharts入门（一）

Highcharts  是一个JS图表库，官方网站： http://www.highcharts.com/

示例一：通过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;

}