JavascriptでChartjsのIEnumerableを反復する

Question

私は、IEnumerable<string>のラベルと、IEnumerable<double[]>のデータをMVCモデルオブジェクトに持っていて、Chartjsを使ってこれらの値をプロットしたいと思っています。

私はグラフをプロットしようとしている私のjavascript関数に両方を渡します。

Chartjs構文は実際に、私が望むようなものである：

私の2つのコレクションを考える

var data = { 
       ... chart info e.g. colors, etc. 
       datasets: [ 
        { 
         label: labels[0], // My first label 
         data: datas[0] // My first double[] 
        }, 
        // Repeat for each data/label combo 
        { 
         label: labels[n], // My n-th label 
         data: datas[n] // My n-th double[] 
        } 
       ] 
      }; 

、どのように私は適切に内の情報を抽出することができますか？明らかに、これらのコレクションの長さは、1対1の関連があるのと同じである必要があります。私はTupleにそれらを組み合わせてみましたが、それはjs側でより複雑になると思います。

また、ChartJSで同じ結果を達成するための簡単な方法を知っている人はいますか？

私はC＃には満足していますが、Javascriptは新しくなっています。

Answer 1

あなたは確かにクライアント側にタプルを送信し、それをJavaスクリプトで簡単に分割できます。タプルをJsonオブジェクトとして取得し、それを2つの配列に分割するために、単純なajax呼び出しを行うことができます。これらの配列は、chart.jsラベルとデータスポットで使用できます。

$.ajax({ 
    url: 'AjaxCall/getChartObjects', 
    dataType: 'json', 
    data: {}, 
    success: function (data) { //data here being the tuple recieved from server 
     //receive the tuple as a single Json object and split it up easily with some seperate arrays 
     dblArray= [] 
     $.each(data.Item1, function (index, value) { 
      dblArray.push(value.text); //label array 
     } 
     descArray= [] 
     $.each(data.Item2, function (index, value) { 
      descArray.push(value.dblTxt); //data array 
     } 
    }, 
    error: function (xhr, status, error) { 
     console.log('Error: ' + error.message); 
    } 
}); 

コントローラからタプルを送信すると、何かのようになります：

var barChartData = { 
       labels: descArray, //array labels 
       datasets: [ 
        { 
         type: "Bar", 
         strokeColor: "black", 
         pointColor: "rgba(220,220,220,1)", 
         pointstrokeColor: "white", 
         data: dblArray, 

        } 
       ] 
      } 

私が推測：あなたは、あなたは、チャートのプロパティで配置する必要があるの配列を持っているでしょう

//tuple sends two objects together- both job arrays will be seperated 
//and used in observables on client side 
var chartObjects = Tuple.Create(chartData, chartLabel); 

return Json(chartObjects, JsonRequestBehavior.AllowGet); 

これがあなたが探していたものなのかどうかは完全にはわかりません。あなたに質問がある場合はお知らせください。