高圖表日期

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腳本之前調用圖表庫。他們應該被命令如下：

<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）塞巴斯蒂安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 串，如果指定了替換器功能 任選取代的值，或可選地包括僅在指定的屬性 指定替換者數組。

（見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 ... 

這對堆棧溢出其他地方的問題可能對你會有所幫助：Difference between JSON.stringify and JSON.parse

我希望這一切是有幫助的。如果您有任何問題，請留下評論，我會很高興根據需要編輯我的答案。