0

これはおそらく非常に簡単な答えですが、私は jQuery/JavaScript に非常に慣れていないので、ご容赦ください。

現時点では、4 つのオプションを含むドロップダウンがあり、その<button>横にユーザーが選択したものに基づいてグラフを変更するものがあります。基本的に私が達成しようとしているのは、ボタンの必要性を取り除き、ユーザーがオプションの 1 つをクリックしたときにチャートを更新することだけです。

以下は、私がベースにしたjsfiddleです。

http://jsfiddle.net/jlbriggs/EmMxH/92/

どんな助けでも素晴らしいでしょう、ありがとう

ヘンリー

4

2 に答える 2

3

クリックイベントではなく、選択リストに「変更」イベントが必要です。（フィドルコードに基づく）

<select id="list">
  <option value="A">Data Set A</option>
  <option value="B">Data Set B</option>
  <option value="C">Data Set C</option>
  <option value="D">Data Set D</option>    
</select>

$("#list").change(function(){
  //... do stuff
  var selVal = $(this).val();
  if(selVal == "A" || selVal == ''){
    options.series = [{name: 'A', data: [1,2,3,2,1]}]
  } else if(selVal == "B"){
    options.series = [{name: 'B', data: [3,2,1,2,3]}]
  } else if(selVal == "C"){
    options.series = [{name: 'C', data: [5,4,8,7,6]}]
  } else {
    options.series = [{name: 'D', data: [4,7,9,6,2]}]
  }
  var chart = new Highcharts.Chart(options);
});
于 2012-07-03T12:45:35.783 に答える
2

作業デモ http://jsfiddle.net/WDcL4/ または http://jsfiddle.net/gUnax/3/を使用$(this)

使用する API: http://api.jquery.com/change/

Jquery 1.4.4 では$("#list").change(function(){...}); http://jsfiddle.net/gUnax/2/を使用することに注意してください。

Jquery 1.7 ...を使用できます$("#list").on('change', function(){...});

お役に立てれば！

コード

$("#list").on('change', function(){
    //alert('f')
    var selVal = $("#list").val();
    if(selVal == "A" || selVal == '')
    {
        options.series = [{name: 'A', data: [1,2,3,2,1]}]
    }
    else if(selVal == "B")
    {
        options.series = [{name: 'B', data: [3,2,1,2,3]}]
    }
    else if(selVal == "C")
    {
        options.series = [{name: 'C', data: [5,4,8,7,6]}]
    } 
    else
    {
        options.series = [{name: 'D', data: [4,7,9,6,2]}]
    }  
    var chart = new Highcharts.Chart(options);    
});
​
于 2012-07-03T12:46:57.140 に答える