Highchart动态加载数据，通过js赋值

js引用

 highcharts.js | exporting.js | jquery-1.10.2.js 

具体实现

html
<div id="container" style="background-color:red;margin:0px;padding:0px;">   </div>

js
//qxH曲线图高度,api json格式,曲线字段
var qxH = window.innerHeight -100;//- 80;
//var qxW = window.innerWidth - 30;
function DataChart(qxH, dataUrl, dataType) {
        var arr=dataType.split(",");
        $.ajax({
            type: 'get',
            url: dataUrl,
            dataType: 'json',
            success: function (data) {
                var obj = eval(data);
                //console.log("MY:" + obj[0].DataValue);
                if (arr.length == 1) {
                    var arrvalue = arr[0];
                    var c1 = [];
                    var showitem1 = arr[0];
                    var datetime = [];
                    var sj = [];
                    try {
                        for (i = 0; i < obj.length; i++) { 
                        c1.push(obj[i][""+arrvalue+""]); 
                        datetime.push(obj[i].SEQNO); 
                        sj.push(obj[i].TimeStamp); 
                        }
                    } catch (e) { alert("暂无数据"+e); return; } var options = { chart: { height: qxH,//图表高度 renderTo: 'container', type: 'line' }, title: { text: '' }, subtitle: { text: '' }, exporting: { enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 }, credits: { enabled: false }, xAxis: { categories: [] }, yAxis: { title: { text: '' } }, legend: { // enabled: false, align: 'left', verticalAlign: 'top', y: 0, x: 60, floating: true, borderWidth: 1 }, tooltip: { shared: true, crosshairs: true }, tooltip: { shared: true, // 提示框是否共享 formatter: function () { // 提示框格式化字符串 var s1 = parseInt(parseInt(this.x) - 1); var s = this.x + "(" + sj[s1] + ")"; $.each(this.points, function () { s += ' ' + this.series.name + ':' + this.y + '';
                                });
                                return s;
                            }
                        },
                        plotOptions: {
                        },
                        series: [{
                        }]
                    };
                    options.xAxis.categories = datetime;
                    options.series[0].name = showitem1;
                    options.series[0].data = c1;
                    options.series[0].color = "orange";
                    var chart = new Highcharts.Chart(options);
                } else if (arr.length == 2) {//两条曲线

                    var arrvalue1 = arr[0];
                    var arrvalue2 = arr[1];
                    var c1 = [];
                    var showitem1 = arr[0];
                    var c2 = [];
                    var showitem2 = arr[1];
                    var datetime = [];
                    var sj = [];
                    try {
                        for (i = 0; i < obj.length; i++) { c1.push(obj[i]["" + arrvalue1 + ""]); c2.push(obj[i]["" + arrvalue2 + ""]); datetime.push(obj[i].SEQNO); sj.push(obj[i].TimeStamp); } } catch (e) { alert("暂无数据" + e); return; } var options = { chart: { height: qxH,//图表高度 renderTo: 'container', type: 'line' }, title: { text: '' }, subtitle: { text: '' }, exporting: { enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 }, credits: { enabled: false }, xAxis: { categories: [] }, yAxis: { title: { text: '' } }, legend: { // enabled: false, align: 'left', verticalAlign: 'top', y: 0, x: 60, floating: true, borderWidth: 1 }, tooltip: { shared: true, crosshairs: true }, tooltip: { shared: true, // 提示框是否共享 formatter: function () { // 提示框格式化字符串 var s1 = parseInt(parseInt(this.x) - 1); var s = this.x + "(" + sj[s1] + ")"; $.each(this.points, function () { s += ' ' + this.series.name + ':' + this.y + '';
                                });
                                return s;
                            }
                        },
                        plotOptions: {
                        },
                        series: [{
                        },{}]
                    };
                    options.xAxis.categories = datetime;
                    options.series[0].name = showitem1;
                    options.series[0].data = c1;
                    options.series[0].color = "orange";
                    options.series[1].name = showitem2;
                    options.series[1].data = c2;
                    options.series[1].color = "green";
                    var chart = new Highcharts.Chart(options);
                } else if (arr.length == 3) {//三条曲线

                    var arrvalue1 = arr[0];
                    var arrvalue2 = arr[1];
                    var arrvalue3 = arr[2];
                    var c1 = [];
                    var showitem1 = arr[0];
                    var c2 = [];
                    var showitem2 = arr[1];
                    var c3 = [];
                    var showitem3 = arr[2];
                    var datetime = [];
                    var sj = [];
                    try {
                        for (i = 0; i < obj.length; i++) { c1.push(obj[i]["" + arrvalue1 + ""]); c2.push(obj[i]["" + arrvalue2 + ""]); c3.push(obj[i]["" + arrvalue3 + ""]); datetime.push(obj[i].SEQNO); sj.push(obj[i].TimeStamp); } } catch (e) { alert("暂无数据" + e); return; } var options = { chart: { height: qxH,//图表高度 renderTo: 'container', type: 'line' }, title: { text: '' }, subtitle: { text: '' }, exporting: { enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 }, credits: { enabled: false }, xAxis: { categories: [] }, yAxis: { title: { text: '' } }, legend: { // enabled: false, align: 'left', verticalAlign: 'top', y: 0, x: 60, floating: true, borderWidth: 1 }, tooltip: { shared: true, crosshairs: true }, tooltip: { shared: true, // 提示框是否共享 formatter: function () { // 提示框格式化字符串 var s1 = parseInt(parseInt(this.x) - 1); var s = this.x + "(" + sj[s1] + ")"; $.each(this.points, function () { s += ' ' + this.series.name + ':' + this.y + '';
                                });
                                return s;
                            }
                        },
                        plotOptions: {
                        },
                        series: [{
                        }, {}, {}]
                    };
                    options.xAxis.categories = datetime;
                    options.series[0].name = showitem1;
                    options.series[0].data = c1;
                    options.series[0].color = "orange";
                    options.series[1].name = showitem2;
                    options.series[1].data = c2;
                    options.series[1].color = "green";
                    options.series[2].name = showitem3;
                    options.series[2].data = c3;
                    options.series[2].color = "red";
                    var chart = new Highcharts.Chart(options);
                } else if (arr.length == 4) {

                    var arrvalue1 = arr[0];
                    var arrvalue2 = arr[1];
                    var arrvalue3 = arr[2];
                    var arrvalue4 = arr[3];
                    var c1 = [];
                    var showitem1 = arr[0];
                    var c2 = [];
                    var showitem2 = arr[1];
                    var c3 = [];
                    var showitem3 = arr[2];
                    var c4 = [];
                    var showitem4 = arr[3];
                    var datetime = [];
                    var sj = [];
                    try {
                        for (i = 0; i < obj.length; i++) { c1.push(obj[i]["" + arrvalue1 + ""]); c2.push(obj[i]["" + arrvalue2 + ""]); c3.push(obj[i]["" + arrvalue3 + ""]); c4.push(obj[i]["" + arrvalue4 + ""]); datetime.push(obj[i].SEQNO); sj.push(obj[i].TimeStamp); } } catch (e) { layer.msg("暂无数据" + e); return; } var options = { chart: { height: qxH,//图表高度 renderTo: 'container', type: 'line' }, title: { text: ''//标题 }, subtitle: { text: '' }, exporting: { enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 }, credits: { enabled: false }, xAxis: { categories: [] }, yAxis: { title: { text: ''//右侧文本值 } }, legend: { // enabled: false, align: 'left', verticalAlign: 'top', y: 0, x: 60, floating: true, borderWidth: 1 }, tooltip: { shared: true, crosshairs: true }, tooltip: { shared: true, // 提示框是否共享 formatter: function () { // 提示框格式化字符串 var s1 = parseInt(parseInt(this.x) - 1); var s = this.x + "(" + sj[s1] + ")"; $.each(this.points, function () { s += ' ' + this.series.name + ':' + this.y + '';
                                });
                                return s;
                            }
                        },
                        plotOptions: {
                        },
                        series: [{
                        }, {}, {}, {}]
                    };
                    options.xAxis.categories = datetime;
                    options.series[0].name = showitem1;
                    options.series[0].data = c1;
                    options.series[0].color = "orange";
                    options.series[1].name = showitem2;
                    options.series[1].data = c2;
                    options.series[1].color = "green";
                    options.series[2].name = showitem3;
                    options.series[2].data = c3;
                    options.series[2].color = "red";
                    options.series[3].name = showitem4;
                    options.series[3].data = c4;
                    options.series[3].color = "blue";
                    var chart = new Highcharts.Chart(options);

                } else {
                    alert("无此类格式");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("失败调用，返回error");
            }
        });
    }