2017-05-17 1 views
0

状況変数をamCharts.loadfileメソッドに渡しますか?

私は、ユーザーがドロップダウンリストに値を選択することができますし、データをグラフにロードされ、グラフに取り組んでいます。 amChartsのウェブサイトでも同様の例が見つかりました。 https://www.amcharts.com/kbase/dynamically-loading-chart-datasets/

この例の問題は、データが「ハードコードされている」ということです。各オプションでは、あらかじめ作成されたリンクでなければなりません。私はこれまでのところ、私が働いて私のチャートを持って、「アイテム」の中で渡されたものに応じて3つの状態をカウントし、コントローラを作成している

を行っている何

私ITEM_NAME変数ですが常にnullです。

public ActionResult checkPriority(string item_name) 
{ 
    decimal?[] priCount = { 0, 0, 0 }; 

    priCount[0] = db.vw_priCount.Where(i => i.itemDescrip == item_name&& i.itemStatus == 1).Count(); 
    priCount[1] = db.vw_priCount.Where(i => i.itemDescrip == item_name&& i.itemStatus == 2).Count(); 
    priCount[2] = db.vw_priCount.Where(i => i.itemDescrip == item_name&& i.itemStatus == 3).Count(); 


    return Json(priCount, JsonRequestBehavior.AllowGet); 

} 

これは私のインデックスページコード

<script> 



     var chart; 


      $(document).ready(function() { 

       $.ajax({ 
        type: "POST", 
        url: '/Home/checkPriority', 
        data:{ 
         item_name: "Pens" 
        }, 
        dataType: "json", 
        success: OnSuccessBoxCountPri, 
        error: OnErrorCallPri 
       }); 

      }); 

      function OnErrorCallPri(response) { 
       alert('An error occured with the charts, please try again later.'); 
      } 

      function OnSuccessBoxCountPri(priCount) { 
       console.log(priCount); 


        chart = AmCharts.makeChart("pribarchartdiv", { 
        "type": "serial", 
        "theme": "none", 
        "marginRight": 70, 
        "dataProvider": [{ 
         "Priority Level": "Low", 
         "cost": priCount[0], 
         "color": "#FF0F00" 
        }, { 
         "Priority Level": "Medium", 
         "cost": priCount[1], 
         "color": "#FF6600" 
        }, { 
         "Priority Level": "High", 
         "cost": priCount[2], 
         "color": "#FF9E01" 
        }, { 
         "Priority Level": "Very High", 
         "cost": priCount[3], 
         "color": "#04D215" 


        }], 
        "valueAxes": [{ 
         "axisAlpha": 0, 
         "position": "left", 
         "title": "Priority" 
        }], 
        "startDuration": 1, 
        "graphs": [{ 
         "balloonText": "<b>[[category]]: [[value]]</b>", 
         "fillColorsField": "color", 
         "fillAlphas": 0.9, 
         "lineAlpha": 0.2, 
         "type": "column", 
         "valueField": "cost" 
        }], 
        "chartCursor": { 
         "categoryBalloonEnabled": false, 
         "cursorAlpha": 0, 
         "zoomable": false 
        }, 
        "categoryField": "Priority Level", 
        "categoryAxis": { 
         "gridPosition": "start", 
         "labelRotation": 45 
        }, 
        "export": { 
         "enabled": true 
        } 

       }); 



      } 



      function setDataSet(dataset_url) { 

       AmCharts.loadFile("checkPriority",{}, function (data) { 
        console.log(dataset_url);//itemname in here 
        console.log(data);//0,0,0 
        chart.dataProvider = AmCharts.parseJSON(data); 
       chart.validateData(); 
      }); 
     } 

    </script> 
    <p class="selector"> 
     <select onchange="setDataSet(this.options[this.selectedIndex].value);"> 
      <option value="Pens">Data Set #1</option> 
      <option value="Chalk">Data Set #2</option> 
      <option value="Books">Data Set #3</option> 
     </select> &lt; Select a data set 
    </p> 

である私は、これは私が(チェックボックスの値である)私の変数を渡す必要がありますラインAmCharts.loadFile("checkPriority",{}, function (data) {であると考えている。私が行く方法上の任意の支援たとえそれができても、これをやり遂げることについては、高く評価されるだろう。

答えて

0

AmCharts.loadFileは、GETリクエストを実行するdataLoaderプラグインによって提供されるAJAXメソッドです。 documentationに示されているように、最初のパラメータはエンドポイントのURLであるため、最初のパラメータとして有効なURLを渡す必要があります。

エンドポイントでデータを取得するにはPOSTが必要なため、loadFileメソッドを使用する代わりに独自のAJAX呼び出しを使用する方がよいでしょう。例:

function setDataSet(dataset) { 
    $.ajax({ 
    type: "POST", 
    url: '/Home/checkPriority', 
    data:{ 
     item_name: dataset 
    }, 
    dataType: "json", 
    success: function(data) { 
     chart.dataProvider = data; 
     /* or if you need to set each element individually like in your makeChart call: 
     chart.dataProvider = [{ 
     "Priority Level": "Low", 
     "cost": data[0], 
     "color": "#FF0F00" 
     }, { 
     "Priority Level": "Medium", 
     "cost": data[1], 
     "color": "#FF6600" 
     }, { 
     "Priority Level": "High", 
     "cost": data[2], 
     "color": "#FF9E01" 
     }, { 
     "Priority Level": "Very High", 
     "cost": data[3], 
     "color": "#04D215" 
     }]; 
     */ 
     chart.validateData(); 
    }, 
    error: OnErrorCallPri 
    }); 
} 
関連する問題