通过在jquery ajax后面的代码中调用方法来更改highcharts JS中的数据

时间:2016-02-05 02:18:12

标签: javascript jquery json ajax highcharts

我通过这个函数从datatable生成json:

  public string DataTableToJSONWithStringBuilder3(DataTable table)
    {
        var JSONString = new StringBuilder();
        if (table.Rows.Count > 0)
        {
            JSONString.Append("[");
            for (int i = 0; i < table.Rows.Count; i++)
            {
               // JSONString.Append("{");
                for (int j = 0; j < table.Columns.Count; j++)
                {
                    if (j < table.Columns.Count - 1)
                    {
                        if (j == 1)
                        {
                            JSONString.Append("[" + table.Rows[i][j].ToString() + ",");
                        }
                        else
                        {
                            JSONString.Append("[" + table.Rows[i][j].ToString() + ",");
                        }

                    }
                    else if (j == table.Columns.Count - 1)
                    {

                        if (j == 1)
                        {
                            JSONString.Append(table.Rows[i][j].ToString() + "]");
                        }
                        else
                        {
                            JSONString.Append(table.Rows[i][j].ToString() + "]");
                        }

                    }
                }
                if (i == table.Rows.Count - 1)
                {
                    JSONString.Append("");
                }
                else
                {
                    JSONString.Append(",");
                }
            }
            JSONString.Append("]");
        }
        return JSONString.ToString();
    }  

在此之前我查询结果两个表,每个表有两列:

       x                      y
"[Date.UTC(2016,3,01)  |    10.00]"
"[Date.UTC(2016,1,01)  |    5.00]"


     w                     z
"[Date.UTC(2016,3,01)  |    10.00]"
"[Date.UTC(2016,1,01)  |    5.00]"

并通过以下方式组合字符串:

  string dataArray = "{ \"dataTarget\":" + dtTarget + ", \"dataRealisasi\" :" + dtRealzn + "}";

我通过jquery ajax得到它

$.ajax({
    type: "POST",
    url: "/ProjMonitor/Report/ProjectMonitoringSummary.aspx/GetlineChart",
   contentType: "application/json",
    dataType: "json",
    data: "{id:'"+idproyek+"'}",
  //  contentType: "application/json; charset=utf-8",
    success: function (msg) { 

var data = msg.d
 }

和json变成这样:

{ "d" : { "dataTarget":[["[Date.UTC(2016,3,01),10.00]"],["[Date.UTC(2016,1,01),5.00]"]], "dataRealisasi" :[["[Date.UTC(2016,3,01),10.00]"],["[Date.UTC(2016,1,01),5.00]"]]}

}

如果我在console.log数据[&#39; dataTarget&#39;],我在控制台日志中看到的结果是:

[Array[1], Array[1]]
0: Array[1]
0: "[Date.UTC(2016,3,01),10.00]"
length: 1
__proto__: Array[0]
1: Array[1]
0: "[Date.UTC(2016,1,01),5.00]"
length: 1
__proto__: Array[0]
length: 2
__proto__: Array[0]

我真正需要的是将highcharts JS元素的动态值放在下面,dataTarget和dataRealisasi可以通过使用参数thru jquery ajax调用方法来改变。

  $('#container3').highcharts({
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Monitoring Proyek'
    },
    subtitle: {
        text: 'Proyek'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        }
    },
    yAxis: {
        title: {
            text: 'Target (%)'
        },
        min: 0
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:%e. %b}: {point.y:.2f} %'
    },

    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },

    series:  [{
        "name": "Proyeksi Target",          
        "data": [ dataTarget

        ]
    }, {
        name: 'Realisasi',
        data: [
           dataRealisasi
        ]
    }]

     });

dataTarget和dataRealisasi的格式应该是这样的

[
                [Date.UTC(1970, 9, 29), 0],
                [Date.UTC(1970, 10, 9), 0.4],
                [Date.UTC(1970, 11, 1), 0.25],
                [Date.UTC(1971, 0, 1), 1.66],
                [Date.UTC(1971, 0, 10), 1.8],
                [Date.UTC(1971, 1, 19), 1.76],
                [Date.UTC(1971, 2, 25), 2.62],
                [Date.UTC(1971, 3, 19), 2.41],
                [Date.UTC(1971, 3, 30), 2.05],
                [Date.UTC(1971, 4, 14), 1.7],
                [Date.UTC(1971, 4, 24), 1.1],
                [Date.UTC(1971, 5, 10), 0]

但它没有努力将数据替换为应该是什么......什么是错的,我改变了什么?

0 个答案:

没有答案