2016-06-16 2 views
-1

Я пытаюсь обновить график C3 с помощью другого onclick funtion, используя функцию загрузки C3.Как изменить функцию onClick функции загрузки C3

Фрагмент кода здесь:

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>

Пожалуйста скажите мне путь так, чтобы обновить Funtion OnClick на самой функции нагрузки.

+0

Что вы имеете в виде 'различного OnClick function' , также то, что вы хотите сделать 'onclick' – curiousguy

+0

@curiousguy Таким образом, попробуйте запустить другое событие on onclick. Как вы можете видеть в приведенном выше примере, я хочу изменить реализацию onclick на функции загрузки C3, вызвав другой console.log. Надеюсь, вы поняли эту идею. – 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

Смежные вопросы