スプリットjsonデータ

Question

ハイチャートを表示しようとしています。私は今、私は

[WebMethod] 
     public static string select() 
     { 

     SMSEntities d = new SMSEntities(); 
     List<string> name = new List<string>(); 
     var mdata = new SMSEntities().selectdata() 
     .Select(s => new { s.name }).ToArray().Distinct(); 
    var score = new SMSEntities().selectdata().Select(s => new { s.name, s.Salary }); 
     var json1 = new JavaScriptSerializer().Serialize(mdata); 
     var json2 = new JavaScriptSerializer().Serialize(score);   
     var result = new { data = json1, data2 = json2 }; 
     return Newtonsoft.Json.JsonConvert.SerializeObject(result); 


     } 

とjQuery

<script type="text/javascript"> 
    //var strArray = "[{ name: 'abc_name', data: [34000] }, { name: 'ght_name', data: [45000] }, { name: 'lmn_name', data: [34000] }, { name: 'hh_name', data: [33000] }]"; 

    $(function() { 
     $.ajax({ 
      type: "POST", 
      url: "WebForm1.aspx/select", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      async: true, 

      success: function (result) { 
       debugger; 
       var data = result.d; 
       debugger 
       data = JSON.parse(data); 
       debugger 
       var data1 = JSON.parse(data.data); 
       debugger 
       var data2 = JSON.parse(data.data2); 


       alert(data1); 



       alert(data2); 


       debugger; 
       //console.log(result); 

       //var od = JSON.stringify(result); 
       //debugger; 
       //alert("1"); 
       //var obj = JSON.parse(od); 
       //debugger; 
       //alert(od); 
       // alert(obj); 



       //console.log(data2); 


       Highcharts.chart('container', { 
        chart: { 
         type: 'column' 
        }, 
        title: { 
         text: 'Monthly Average Rainfall' 
        }, 
        subtitle: { 
         text: 'Source: WorldClimate.com' 
        }, 
        xAxis: { 
         categories:data1, 
         // 'Jan', 
         // 'Feb', 
         // 'Mar', 
         // 'Apr', 
         // 'May', 
         // 'Jun', 
         // 'Jul', 
         // 'Aug', 
         // 'Sep', 
         // 'Oct', 
         // 'Nov', 
         // 'Dec' 
         //], 
         crosshair: true 
        }, 
        yAxis: { 
         min: 0, 
         title: { 
          text: 'Rainfall (mm)' 
         } 
        }, 
        tooltip: { 
         headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
         pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
          '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
         footerFormat: '</table>', 
         shared: true, 
         useHTML: true 
        }, 
        plotOptions: { 
         column: { 
          pointPadding: 0.2, 
          borderWidth: 0 
         } 
        }, 

        //series: [{ 
        // name: 'Tokyo', 
        // data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

        //}, { 
        // name: 'New York', 
        // data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] 

        //}, { 
        // name: 'London', 
        // data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] 

        //}, { 
        // name: 'Berlin', 
        // data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] 

        //}] 


        series: data2 
       }); 

      }, 
      error: function (error) { 
       alert(error); 
      } 
     }); 
    }); 


</script> 

データがチャートに

IMAGES

警告を表示されていません。このWebメソッドを試してみてください。この http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/

を使用します1

警告2

JS FIDDLE

http://jsfiddle.net/tvxufa68/1/

Answer 1

スクリーンショットを見ると、次の結果が表示されます。

var data2 = JSON.parse(data.data2); 

プロパティがNameとSalaryのオブジェクトの配列です。この配列のオブジェクトをハイチャートのseriesとして設定しています。これは、ハイアールがseriesのオブジェクトの非常に特定の配列を期待しているため動作しません。docsを参照してください。

あなたが代わりにhighchartsが

... 
series: data2.map(function(x){ 
         return { 
          name: x.name, 
          data: [parseInt(x.Salary,10)] 
         }; 
        }) 
... 

ライブたとえば期待している配列にあなたのdata2をtourn必要があります。他のhttp://jsfiddle.net/tvxufa68/3/

：http://jsfiddle.net/tvxufa68/2/

そして、 "給与" のハードコーディングされたカテゴリとをこれを行う方法は、nameでxaxisにラベルを付けることです：http://jsfiddle.net/tvxufa68/4/

私はこれらのバージョンの1つがあなたのニーズに合っていると確信しています！

Answer 2

あなたのデータはあなたがjosn`オブジェクトでありますあなたはこの

var data = result.d; 
data = JSON.parse(data); 
var data1 = JSON.parse(data.data); 
var data2 = JSON.parse(data.data2); 

var dataArrayFinal = Array(); 
for (i = 0; i < data2.length; i++) { 
    name[i] = data2[i].name; 
    data[i] = data2[i].Salary; 
} 

for (j = 0; j < name.length; j++) { 
    dataArrayFinal[j] = { "name": name[j], "y":parseInt(data[j]) }; 
} 

そして、あなたのチャートのコード

series: [{ 
    data: dataArrayFinal 
}] 

Hereで次の操作を行うことができ、データを受信した後、この

var data = { "data": "[{\"name\":\"abc_name\"},{\"name\":\"xyz_name\"},{\"name\":\"def_name\"},{\"name\":\"ght_name\"},{\"name\":\"lmn_name\"},{\"name\":\"hh_name\"}]", "data2": "[{\"name\":\"abc_name\",\"Salary\":\"34000\"},{\"name\":\"xyz_name\",\"Salary\":\"23000\"},{\"name\":\"def_name\",\"Salary\":\"1000\"},{\"name\":\"ght_name\",\"Salary\":\"45000\"},{\"name\":\"lmn_name\",\"Salary\":\"34000\"},{\"name\":\"hh_name\",\"Salary\":\"33000\"}]" }; 

var data1 = result.data1; 
var data2 = result.data2; 

を行うことができますことはあなたのデータとjsfiddleある