Javascript 高图表日期

Javascript 高图表日期,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,我尝试根据日期显示饼图。。当我从下拉列表中选择值和从日历中选择日期时,首先我尝试在警报框中显示数据。。 所以数据成功地显示在警报框中,现在我想在饼图中显示数据,我尝试了这个方法,但图表不显示: UPDATE CODE <script type="text/javascript"> var strArray = [['sfdsdfLi', 9], ['Kiwsdfi', 3], ['Mixesdfd nuts', 1], ['Oranges', 6], ['G

我尝试根据日期显示饼图。。当我从下拉列表中选择值和从日历中选择日期时,首先我尝试在警报框中显示数据。。 所以数据成功地显示在警报框中,现在我想在饼图中显示数据,我尝试了这个方法,但图表不显示:

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>

以下是您的工作图表的最新版本:

需要注意的四项:

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>
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.stringifyobj行是导致数据不出现的原因。根据Mozilla开发者网络:

stringify方法将JavaScript值转换为JSON 字符串,如果调用了替换函数,则可以选择替换值 指定的属性,或者如果 已指定替换器数组

这就是我看到的关键问题:您的数据是以字符串而不是数组的形式返回的,因此您的图表没有以正确的格式获取数据。相反,请尝试使用JSON.parse:

有关堆栈溢出的其他问题可能会对您有所帮助:


我希望所有这些都能有所帮助。如果您有任何问题,请留下评论,我很乐意根据需要编辑我的答案。

问题在于您使用了字符串和求值函数。将其替换为JSON。因此,在后端返回JSON并在JS中使用$.getJSON。您可以避免数据类型的问题。同时,通过jslint验证您的代码,因为有一些语法错误。。名称:'DeliveredAmount',colorByPoint:true,data:JSON.parsemyarray但这也不起作用,我如何用JSON替换?像这样?数据:JSON.stringify{region:$'regiondrop'.val,fdate:$'fromdate'.val,tdate:$'todate'.val},@SebastianBochan?????@SUPER_用户感谢您的耐心等待。不幸的是,您添加的ASP代码无法帮助我查看返回到ajax调用的实际数据。我需要的是WebForm1.aspx/GetVo的完整URL。这样,我就可以通过一个getJSON函数运行数据,看看是否有什么东西阻止了你的聊天@迈克Zavarello@SUPER_USER例如,我需要像http://www.mywebsite.com/WebForm1.aspx/GetVo. 或者,以任何其他方式查看您正在获取的真实数据。您的示例很有帮助,但正如Sebastian Bochen在他们的评论中提到的那样,您询问了使用getJSON解析数据的问题。@SUPER_USER我的朋友,我已经尽了最大的努力来帮助回答您的问题,但我想我已经无能为力了。我最后一次更新了我的答案,在第4项进行了代码编辑。如果你觉得我写的东西不能解决你的问题,欢迎你删除悬赏。@SUPER\u用户:当有人告诉你他们已经帮了你,你就不再回应他们了。首先,这是徒劳的;第二,你继续为一个他们不想再关心的问题打扰他们是非常粗鲁的。另外,你有整整一周的时间等待合适的答案——如果你对这个答案不满意,为什么你要马上奖励奖金?这不仅是对你,而且对迈克来说都是巨大的时间浪费,而且在事情发生两周后继续要求他们注意,你真是太自私了。
$(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;
    });
});
// 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]];
$.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 ...