2016-06-16 7 views
-1

C3のロード関数を使用して、異なるonclick関数でC3グラフを更新しようとしています。C3ロード関数のonClick関数を変更する方法

コードスニペットはここにある:

var json1 = [{ 
 
      date: '2014-01-01', 
 
      upload: 200, 
 
      download: 200, 
 
      total: 400 
 
     }, { 
 
      date: '2014-01-02', 
 
      upload: 100, 
 
      download: 300, 
 
      total: 400 
 
     }, { 
 
      date: '2014-02-01', 
 
      upload: 300, 
 
      download: 200, 
 
      total: 500 
 
     }, { 
 
      date: '2014-02-02', 
 
      upload: 400, 
 
      download: 100, 
 
      total: 500 
 
     }]; 
 
     
 
     var json2 = [{ 
 
      date: '2014-01-01', 
 
      upload: 200, 
 
      download: 500, 
 
      total: 700 
 
     }, { 
 
      date: '2014-01-02', 
 
      upload: 500, 
 
      download: 450, 
 
      total: 950 
 
     }, { 
 
      date: '2014-02-01', 
 
      upload: 200, 
 
      download: 800, 
 
      total: 1000 
 
     }, { 
 
      date: '2014-02-02', 
 
      upload: 300, 
 
      download: 500, 
 
      total: 800 
 
     }]; 
 
     
 
var chart = c3.generate({ 
 
    bindto: '#div1', 
 
    data: { 
 
     json: json1, 
 
     onclick: function (event) { 
 
     \t console.log("11111111111") ;    
 
\t \t \t \t }, 
 
     keys: { 
 
      x: 'date', 
 
      value: ['upload', 'download'] 
 
     } 
 
    }, 
 
    axis: { 
 
     x: { 
 
      type: 'timeseries', 
 
      tick: { 
 
       format: function (x) { 
 
        if (x.getDate() === 1) { 
 
         return x.toLocaleDateString(); 
 
        } 
 
       } 
 
      } 
 
     } 
 
    } 
 
}); 
 

 
setTimeout(function() { 
 
    chart.unload(); 
 
}, 1000); 
 

 
setTimeout(function() { 
 
    chart.load({ 
 
       json: json2, 
 
       keys: { 
 
        x: 'date', 
 
        value: ['upload', 'download'] 
 
       }, 
 
       onclick: function (event) { 
 
     \t \t \t \t \t \t console.log("22222222") ;    
 
       }, 
 
      }); 
 
}, 1000);
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/> 
 
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script> 
 
<div id="div1"></div>

ロード機能自体にonClickの目的球を更新する方法ので教えてください。

+0

あなたは '異なるのonclick function'とはどういう意味ですかまた、 'onclick'をしたいもの – curiousguy

+0

@curiousguyこれは、onclickで別のイベントを実行しようとしていることを意味します。上記の例でわかるように、私は異なるconsole.logを呼び出すことによってC3のロード機能でonclickの実装を変更したいと思います。私はあなたがそのアイデアを得ることを望みます。 – Raichu

答えて

1

c3.load()はc3.generate()のすべての要素を提供していないので、これを行う方法は2つあります。

リユースc3.generate()、またはのような、あなたが変更することができます変数にクリックイベントをハンドオフ:

// INITIAL CLICK HANDLER 
 
var clickhandler = function(event) { 
 
     \t console.log("11111111111"); 
 
} 
 

 
var json1 = [{ 
 
     date: '2014-01-01', 
 
     upload: 200, 
 
     download: 200, 
 
     total: 400 
 
    }, { 
 
     date: '2014-01-02', 
 
     upload: 100, 
 
     download: 300, 
 
     total: 400 
 
    }, { 
 
     date: '2014-02-01', 
 
     upload: 300, 
 
     download: 200, 
 
     total: 500 
 
    }, { 
 
     date: '2014-02-02', 
 
     upload: 400, 
 
     download: 100, 
 
     total: 500 
 
    }]; 
 
    
 
    var json2 = [{ 
 
     date: '2014-01-01', 
 
     upload: 200, 
 
     download: 500, 
 
     total: 700 
 
    }, { 
 
     date: '2014-01-02', 
 
     upload: 500, 
 
     download: 450, 
 
     total: 950 
 
    }, { 
 
     date: '2014-02-01', 
 
     upload: 200, 
 
     download: 800, 
 
     total: 1000 
 
    }, { 
 
     date: '2014-02-02', 
 
     upload: 300, 
 
     download: 500, 
 
     total: 800 
 
    }]; 
 

 
// GENERATE CHART FROM JSON1    
 
var chart = c3.generate({ 
 
    bindto: '#div1', 
 
    data: { 
 
     json: json1, 
 
     onclick: function(event) { clickhandler(event) }, 
 
     keys: { 
 
      x: 'date', 
 
      value: ['upload', 'download'] 
 
     } 
 
    }, 
 
    axis: { 
 
     x: { 
 
      type: 'timeseries', 
 
      tick: { 
 
       format: function (x) { 
 
        if (x.getDate() === 1) { 
 
         return x.toLocaleDateString(); 
 
        } 
 
       } 
 
      } 
 
     } 
 
    } 
 
}); 
 

 
// MAKE CHANGES TO THE LOADED CHART 
 
setTimeout(function() { 
 
    // CHANGE THE CLICK EVENT HANDLER 
 
    clickhandler = function(event) { 
 
     console.log('22222222222'); 
 
    }; 
 
    // UNLOAD EXISTING DATA AND LOAD NEW DATA FROM JSON2 
 
    chart.load({ 
 
       json: json2, 
 
       keys: { 
 
        x: 'date', 
 
        value: ['upload', 'download'] 
 
       }, 
 
       unload: chart.columns 
 
    }); 
 
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script> 
 
<div id="div1"></div>

+1

ご返信ありがとうございます。それは助けになった。 – Raichu

関連する問題