-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の目的球を更新する方法ので教えてください。
あなたは '異なるのonclick function'とはどういう意味ですかまた、 'onclick'をしたいもの – curiousguy
@curiousguyこれは、onclickで別のイベントを実行しようとしていることを意味します。上記の例でわかるように、私は異なるconsole.logを呼び出すことによってC3のロード機能でonclickの実装を変更したいと思います。私はあなたがそのアイデアを得ることを望みます。 – Raichu