Highcharts - setData（）不更新列圖正確 - 難倒

我有一個Highcharts Column圖，我正在使用由用戶選定的下拉菜單觸發的setData（）進行更新。我確信之前的代碼工作正常，但現在它不能正確觸發setData（）。請參閱我的JS小提琴這裏Highcharts - setData（）不更新列圖正確 - 難倒

http://jsfiddle.net/mshirk/6QYzD/18/

這裏是我的JavaScript和HTML

$(function() { 
    var chartBench; 
    $(document).ready(function() { 
     chartBench = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'containerYo', 
       type: 'column' 
      }, 
      title: { 
       text: '' 
      }, 
      credits: { 
       enabled: false 
      }, 
      legend: {}, 
      plotOptions: { 
       series: { 
        shadow: false, 
        borderWidth: 0 
       } 
      }, 
      xAxis: { 
       lineColor: '#999', 
       lineWidth: 1, 
       tickColor: '#666', 
       tickLength: 3, 
       categories: ['2011', '2012', '2013', '2014'], 
       title: { 
        text: 'Years' 
       } 
      }, 
      yAxis: { 
       lineColor: '#999', 
       lineWidth: 1, 
       tickColor: '#666', 
       tickWidth: 1, 
       tickLength: 3, 
       gridLineColor: '#ddd', 
       labels: { 
        format: '$ {value}' 
       }, 
       title: { 
        text: '' 
       } 
      }, 
      series: [{ 
       name: 'Value A', 
       data: [ 
        [201], 
        [211], 
        [221], 
        [131] 
       ] 


      }, { 
       name: 'Value B', 
       data: [ 
        [192], 
        [202], 
        [212], 
        [122] 
       ] 


      }, { 
       name: 'Value C', 
       data: [ 
        [183], 
        [193], 
        [203], 
        [113] 
       ] 


      }, { 
       name: 'Value D', 
       data: [ 
        [174], 
        [184], 
        [194], 
        [104] 
       ] 


      }] 



     }); 
    }); 


    $("#list").on('change', function() { 
     //alert('f') 
     var selVal = $("#list").val(); 
     var selValB = $("#listb").val(); 
     var selValBB = $("#listc").val(); 

     if (selVal == "a" && selValB == "a" && selValBB == "a") { 
      chartBench.series[0].setData(
      [ 
       [201], 
       [211], 
       [221], 
       [131] 
      ]); 
      chartBench.series[1].setData(
      [ 
       [192], 
       [202], 
       [212], 
       [122] 
      ]); 
      chartBench.series[2].setData(
      [ 
       [183], 
       [193], 
       [203], 
       [113] 
      ]); 
      chartBench.series[3].setData(
      [ 
       [174], 
       [184], 
       [194], 
       [104] 
      ]); 

     } else if (selVal == "a" && selValB == "a" && selValBB == "b") { 
      chartBench.series[0].setData(
      [ 
       [201], 
       [211], 
       [221], 
       [131] 
      ]); 
      chartBench.series[1].setData(
      [ 
       [192], 
       [202], 
       [212], 
       [122] 
      ]); 
      chartBench.series[2].setData(
      [ 
       [183], 
       [193], 
       [203], 
       [113] 
      ]); 
      chartBench.series[3].setData(
      [ 
       [174], 
       [184], 
       [194], 
       [104] 
      ]); 

     } else if (selVal == "b" && selValB == "a" && selValBB == "a") { 
      chartBench.series[0].setData(
      [ 
       [201], 
       [211], 
       [221], 
       [131] 
      ]); 
      chartBench.series[1].setData(
      [ 
       [192], 
       [202], 
       [212], 
       [122] 
      ]); 
      chartBench.series[2].setData(
      [ 
       [183], 
       [193], 
       [203], 
       [113] 
      ]); 
      chartBench.series[3].setData(
      [ 
       [174], 
       [184], 
       [194], 
       [104] 
      ]); 

     } else if (selVal == "b" && selValB == "a" && selValBB == "b") { 
      chartBench.series[0].setData(
      [ 
       [141], 
       [111], 
       [121], 
       [131] 
      ]); 
      chartBench.series[1].setData(
      [ 
       [132], 
       [102], 
       [112], 
       [122] 
      ]); 
      chartBench.series[2].setData(
      [ 
       [123], 
       [93], 
       [103], 
       [113] 
      ]); 
      chartBench.series[3].setData(
      [ 
       [114], 
       [84], 
       [94], 
       [104] 
      ]); 

     } else if (selVal == "b" && selValB == "a" && selValBB == "a") { 
      chartBench.series[0].setData(
      [ 
       [201], 
       [211], 
       [221], 
       [131] 
      ]); 
      chartBench.series[1].setData(
      [ 
       [192], 
       [202], 
       [212], 
       [122] 
      ]); 
      chartBench.series[2].setData(
      [ 
       [183], 
       [193], 
       [203], 
       [113] 
      ]); 
      chartBench.series[3].setData(
      [ 
       [174], 
       [184], 
       [194], 
       [104] 
      ]); 

     } else if (selVal == "b" && selValB == "a" && selValBB == "b") { 
      chartBench.series[0].setData(
      [ 
       [141], 
       [111], 
       [121], 
       [131] 
      ]); 
      chartBench.series[1].setData(
      [ 
       [132], 
       [102], 
       [112], 
       [122] 
      ]); 
      chartBench.series[2].setData(
      [ 
       [123], 
       [93], 
       [103], 
       [113] 
      ]); 
      chartBench.series[3].setData(
      [ 
       [114], 
       [84], 
       [94], 
       [104] 
      ]); 

     } else if (selVal == "a" && selValB == "b" && selValBB == "a") { 
      chartBench.series[0].setData(
      [ 
       [151], 
       [251], 
       [221], 
       [231] 
      ]); 
      chartBench.series[1].setData(
      [ 
       [172], 
       [242], 
       [212], 
       [222] 
      ]); 
      chartBench.series[2].setData(
      [ 
       [183], 
       [233], 
       [203], 
       [213] 
      ]); 
      chartBench.series[3].setData(
      [ 
       [154], 
       [224], 
       [194], 
       [204] 
      ]); 

     } else if (selVal == "a" && selValB == "b" && selValBB == "b") { 
      chartBench.series[0].setData(
      [ 
       [151], 
       [251], 
       [221], 
       [231] 
      ]); 
      chartBench.series[1].setData(
      [ 
       [172], 
       [242], 
       [212], 
       [222] 
      ]); 
      chartBench.series[2].setData(
      [ 
       [183], 
       [233], 
       [203], 
       [213] 
      ]); 
      chartBench.series[3].setData(
      [ 
       [154], 
       [224], 
       [194], 
       [204] 
      ]); 

     } else if (selVal == "b" && selValB == "b" && selValBB == "a") { 
      chartBench.series[0].setData(
      [ 
       [151], 
       [251], 
       [221], 
       [231] 
      ]); 
      chartBench.series[1].setData(
      [ 
       [172], 
       [242], 
       [212], 
       [222] 
      ]); 
      chartBench.series[2].setData(
      [ 
       [183], 
       [233], 
       [203], 
       [213] 
      ]); 
      chartBench.series[3].setData(
      [ 
       [154], 
       [224], 
       [194], 
       [204] 
      ]); 

     } else if (selVal == "b" && selValB == "b" && selValBB == "b") { 
      chartBench.series[0].setData(
      [ 
       [141], 
       [151], 
       [161], 
       [171] 
      ]); 
      chartBench.series[1].setData(
      [ 
       [132], 
       [142], 
       [172], 
       [162] 
      ]); 
      chartBench.series[2].setData(
      [ 
       [123], 
       [133], 
       [183], 
       [153] 
      ]); 
      chartBench.series[3].setData(
      [ 
       [114], 
       [124], 
       [194], 
       [144] 
      ]); 

     } else { 

     } 
    }); 

}); 


    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 
    <div> 
    <div style="display:inline-block; padding-right:20px; padding-left:20px;"> 
    <div>1: <select id="list"> 
    <option id="optiona" value="a" selected=yes >Option A</option> 
    <option id="optionb" value="b">Option B</option> 
    </select></div> 
    </div> 

    </div> 
    <div id="containerYo" style="width: 528px; height: 400px; margin: 0 auto"></div>

我沒有收到任何錯誤，我完全難倒，任何幫助或洞察力將不勝感激！

來源

2014-07-23 user3826864

你有沒有嘗試剝下你的代碼，看看你是否可以用最低限度的代碼重現錯誤？通常我會發現自己解決了自己的錯誤，而且在SO上發佈通常也是更好的選擇。 – sage88

感謝您的幫助，我在這裏和JSFiddle儘可能簡化了代碼。下拉菜單仍然不會觸發setData（） – user3826864

運行您的JSFiddle並更改爲「選項B」並返回到「選項A」不會執行任何操作，因爲數據沒有更改。這兩個選項（在「選項C」和「選項E」的情況下）都將數據設置爲與創建圖表時出現的值完全相同的值。

如果您在開始在「選項A」和「選項B」之間切換之前運行JSFiddle，請設置「選項D」和「選項F」，您將看到代碼顯然按預期工作。

if (selVal == "a" && selValB == "a" && selValBB == "a") { ...

和/或本否則，如果分支：

else if (selVal == "b" && selValB == "a" && selValBB == "a") { ...

如該JSFiddle example所示，其具有

這可以通過在該if-分支改變任何一個號碼來確認在所描述的情況下只改變了兩個數字。

這就是說，這清楚地表明這個代碼需要整理。

來源

2014-07-24 00:34:56

這個答案是正確的。另外，你有3個下拉菜單，每個菜單都給你2個選擇。這意味着對於每個onChange函數，您應該總共有2^3 = 8種不同的可能結果，但是if/else語句會記錄10種不同的結果。每個onChange函數中有2個冗餘if語句。 – jeebface

@Okkloss非常感謝您的幫助！我完全忘記了一些數據可能包含重複值！這解決了這個問題。 – user3826864

@jeebface感謝您注意到多餘的if語句！ – user3826864

Highcharts - setData（）不更新列圖正確 - 難倒

回答

相關問題