Question

情况

我正在制作一个图表，用户可以在下拉列表中选择一个值，并将数据加载到图表中。我在amCharts网站上找到了类似的例子。 https://www.amcharts.com/kbase/dynamically-loading-chart-datasets/

这个例子的问题是数据是＆＃34;硬编码＆＃34;所以对于每个选项，它们必须是预先建立的链接。

我做了什么

到目前为止，我已经让我的图表工作并创建了一个控制器，根据什么＆＃34;项目＆＃34;计算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) {行，我应该传递我的变量（这是复选框的值）。如果我甚至可以做到这一点的任何帮助我将不胜感激

Answer 1

AmCharts.loadFile是由执行GET请求的dataLoader插件提供的AJAX方法。如documentation所示，第一个参数是您的端点的网址，因此您希望将有效的网址作为第一个参数传递。

由于您的端点需要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
  });
}

将变量传递给amCharts.loadfile方法？

1 个答案: