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;

}