Question

我尝试根据日期显示饼图..当我从下拉列表中选择值并从日历中选择日期时，首先我尝试在警告框中显示数据。所以数据在警告框中成功显示，现在我想在饼图中显示数据，我试试这个，但图表不显示：

UPDATE CODE


    <script type="text/javascript">


     var strArray = [['sfdsdfLi', 9], ['Kiwsdfi', 3], ['Mixesdfd nuts', 1], ['Oranges', 6], ['Grapes (bunch)', 1]];
     $(function () {
         $('[ID*=search_data]').on('click', function () {
             var from = $('[ID*=fromdate]').val();
             var to = $('[ID*=todate]').val();
             var reg = $('[id*=regiondrop] option:selected')[0].value; // changed this to .val()
             var obj = {};
             obj.fdate = from;
             obj.tdate = to;
             obj.region = reg;
             GetData(obj);
             return false;
         });
     });
     function GetData(obj) {

         $.ajax({
             type: "POST",
             contentType: "application/json; charset=utf-8",
             url: "WebForm1.aspx/GetVo",
             data: JSON.stringify(obj),

             dataType: "json",
             async: true,
             cache: false,
             success: function (result) {

                 alert(result.d);
                 alert('u');
                 // start
                 strArray = result.d;
                 var myarray = eval(strArray);
                 DreawChart(myarray);

                 alert('uu');

                  } ,
                  error: function (result) {
                   alert("Error");
                 }
         });
}
function DreawChart(result) {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },
        title: {
            text: 'Contents of Highsoft\'s weekly fruit delivery'
        },
        subtitle: {
            text: '3D donut in Highcharts'
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45
            }
        },
        series: [{
            name: 'Delivered amount',
            data: result


        }]
    });

}
 </script>

Answer 1

以下是工作图表中小提琴的更新版本：https://jsfiddle.net/brightmatrix/bkbdna6d/12/

需要注意的四个方面：

1）在调用jQuery脚本之前调用了Highcharts库。它们应按如下方式订购：

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- moved the Highcharts scripts AFTER the jQuery scripts are called -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

2）您的下拉菜单中缺少ID，因此第一个函数未检索到该值。

在您的HTML中：

<select id="regiondrop">  <!-- added id here; needed in your first function call  -->
    <option value="UK">UK</option>
    <option value="France">France</option>
    <option value="London">London</option>
    <option value="Paris">Paris</option>
</select>

在您的Javascript代码中：

$(function () {
    $('[ID*=search_data]').on('click', function () {
        var from = $('[ID*=fromdate]').val();
        var to = $('[ID*=todate]').val();
        var reg = $('[ID*=regiondrop]').val();      // changed this to .val()
        var obj = {};
        obj.fdate = from;
        obj.tdate = to;
        obj.region = reg;
        GetData(obj);
        return false;
    });
});

3）正如 Sebastian Bochan 所指出的，图表的值被读取为字符串，而不是数组。这就是它应该出现的方式。请注意，整个数组周围没有引号。

// removed quotes from this line to make it a regular array, not a string
var strArray = [['sfdsdfLi', 9],['Kiwsdfi', 3],['Mixesdfd nuts', 1],['Oranges', 6],['Grapes (bunch)', 1]];

现在，点击“搜索数据”按钮后，将显示圆环图：

4）经过进一步审核，我认为JSON.stringify(obj)行是导致您的数据无法显示的原因。根据Mozilla开发者网络：

JSON.stringify（）方法将JavaScript值转换为JSON string，如果是replacer函数，则可以选择替换值如果是，则指定或者可选地仅包括指定的属性指定了replacer数组。

（见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify）

这是我看到的关键问题：您的数据作为字符串返回，而不是数组，因此您的图表无法以正确的格式获取数据。相反，请尝试使用JSON.parse()：

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "WebForm1.aspx/GetVo",  // <--- this is a relative URL and will not work in your fiddle; update your source code with the full URL instead
    data: JSON.stringify(obj),   // <--- change this to JSON.parse(obj)
    dataType: "json",
    async: true,
    cache: false,
    // ... the rest of your code ...

Stack Overflow上的其他问题可能对您有所帮助：Difference between JSON.stringify and JSON.parse

我希望所有这些都有帮助。如果您有任何疑问，请发表评论，我很乐意根据需要编辑我的答案。

高图日期

1 个答案: