2013-04-12 3 views
19

Sto lavorando a una webapp e di recente ho scambiato google charts con chart.js perché è visivamente più attraente. Tuttavia, l'unica perdita che ho preso è che non riesco più a trovare suggerimenti sopra i punti dati. Mi stavo chiedendo se qualcuno sa come farlo, visto che sono un principiante con javascript. Ecco il codice per il grafico e le impostazioni:Come aggiungere suggerimenti al grafico chart.js

var data = { 
      labels : graphData[0], 
      datasets : [ 
       { 
        fillColor : "rgba(200,160,100,0.5)", 
        strokeColor : "rgba(80,240,70,1)", 
        pointColor : "rgba(80,240,70,1)", 
        pointStrokeColor : "#fff", 
        data : graphData[3] 
       }, 
       { 
        fillColor : "rgba(220,220,220,0.5)", 
        strokeColor : "rgba(220,220,220,1)", 
        pointColor : "rgba(220,220,220,1)", 
        pointStrokeColor : "#fff", 
        data : graphData[1] 
       }, 
       { 
        fillColor : "rgba(151,187,205,0.5)", 
        strokeColor : "rgba(151,187,205,1)", 
        pointColor : "rgba(151,187,205,1)", 
        pointStrokeColor : "#fff", 
        data : graphData[2] 
       } 
      ] 
     }; 

     var options = { 
      scaleShowGridLines : true, 
      scaleShowLabels : true, 
      animationSteps : 150, 
      scaleOverride: true, 
      scaleSteps : Math.max.apply(Math, graphData[3]), 
      scaleStepWidth : 1, 
      scaleStartValue : 1 
     }; 

     var ctx = document.getElementById("chart_div").getContext("2d"); 
     ctx.canvas.width = Math.max(graphData[0].length * 60, 600); 
     var myNewChart = new Chart(ctx).Line(data,options); 
     $('#chart_area').fadeIn(); 
     $('html, body').animate({ 
      scrollTop: $("#picture_area").offset().top 
     }, 1000); 
+0

hai capito come implementare i tooltip? – tviana

+2

ottenere la libreria Chart.js più recente dovrebbe avere tooltip incorporato, quindi per attivarlo aggiungerlo all'opzione '{showTooltips: true}' e consultare i [documenti] (http://www.chartjs.org/docs/) per modificarlo –

risposta

8

C'è una versione chartjs disponibili con tooltip si può ottenere in questa pagina github https://github.com/Regaddi/Chart.js/tree/tooltips

Sembra che il link qui sopra non è più disponibile

Tuttavia la sua disponibili here in Github

è possibile vedere la documentazione here

+0

Sembra che ci sia un ramo "tooltips" nel repository git che probabilmente dovresti usare. –

+0

Qualche documentazione? –

+0

come si può attivarli? – mwm

1
var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myLine = new Chart(ctx).Line(lineChartData, { 
     responsive: true, 
     showTooltips: true, 
     multiTooltipTemplate: "<%= value %>", 
    }); 

utilizzare questo per impostare le impostazioni gloabl in chartjs.