將變量傳遞給amCharts.loadfile方法？

Question

形勢

我工作的一個圖形，其中一個用戶可以在下拉列表中選擇一個值和數據加載到一個圖表。 我在amCharts網站上找到了一個類似的例子。 https://www.amcharts.com/kbase/dynamically-loading-chart-datasets/

這個例子的問題是數據是「硬編碼的」，因此對於每個選項它們必須是預建鏈接。

我做了什麼

到目前爲止，我已經得到了我的圖表工作，並創建了一個控制器，計算依據是什麼「項目」中獲得通過3個狀態。

但是我ITEM_NAME變量始終爲空。

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) {。我如何去任何援助關於這樣做，如果它甚至可以做，將不勝感激。

Answer 1

AmCharts.loadFile是執行GET請求的dataLoader插件提供的AJAX方法。如documentation所示，第一個參數是端點的URL，因此您需要傳遞有效的URL作爲第一個參數。

由於您的端點需要POST來獲取數據，所以最好使用自己的AJAX調用而不是使用loadFile方法。例如：

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 
    }); 
}