2017-07-30 4 views
0

私はChart.JSでコンボチャートを作成していますが、これはバー/ラインコンボです。 dataset[0]のラベル%の標識とdataset[1]のラベルを表示したいのですが、$と表示したいです。今私がラベルを参照するとき、あなたがバー/ラインの上にマウスを置いたときに表示され、情報を表示することを意味します。私は、以下の構文を試みたが、これもチャート表示を持っていませんChart.JS DataSetsの書式設定のラベルが異なる

dataset[0]を持って適切な方法をどのようになるか%を示した(私はdataset[0] & dataset[1]を説明するためにしようとするifステートメントを追加するために私のコードを変更しました)記号とdataset[1]$を示しますか?

 var labelsarr = ["Red 12", "Red 13", "Yellow 12", "Yellow 13", "Blue 12", "Blue 13"], 
    ; 

    var ctx = document.getElementById("myChart"); 
    var myChart = new Chart(ctx, { 
       type: 'bar', 
       data: { 
        labels: labelsarr, 
        datasets: [{ 
          type: 'line', 
          fill: false, 
          label: 'Percent', 
          backgroundColor: 'rgba(255,0,0,1)', 
          borderColor: 'rgba(255,0,0,1)', 
          data: [3, 4, 10, 5, 8, 7], 
         }, {} 
         data: [12, 19, 3, 5, 2, 3], 
         label: 'Total Revenue', 
         backgroundColor: 'rgba(0, 129, 214, 0.8)', 
        }] 
      }, 
      options: { 
       tooltips: { 
        callbacks: { 
         if (chart.data.datasets = [1]) { 
          label: function(t, d) { 
           var xLabel = d.datasets[t.datasetIndex].label; 
           var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel; 
           return xLabel + ': ' + yLabel; 
          } 
         } 
         if (chart.data.datasets = [0]) { 
          label: function(value) { 
           return value + "%" 
          } 
         } 
        } 
       } 
      }, 
      legend: { 
       display: false, 
       position: 'top', 
      }, 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero: true, 
         callback: function(value, index, values) { 
          if (parseInt(value) >= 1000) { 
           return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
          } else { 
           return '$' + value; 
          } 
         } 
        } 
       }] 
      } 
     }, 
     plugins: [{ 
      beforeDraw: function(chart) { 
       var labels = chart.data.labels; 
       labels.forEach(function(e, i) { 
        var bar = chart.data.datasets[1]._meta[0].data[i]._model; 
        var dataPoint = e.split(/\s/)[1]; 
        if (dataPoint === '12') 
         bar.backgroundColor = 'blue'; 
        else if (dataPoint === '13') 
         bar.backgroundColor = 'orange'; 
       }); 
      } 
     }] 
    }); 

答えて

1

次のツールチップのコールバック関数を使用します。

callbacks: { 
    label: function(t, d) { 
     if (t.datasetIndex === 0) { 
     var xLabel = d.datasets[t.datasetIndex].label; 
     var yLabel = t.yLabel + '%'; 
     return xLabel + ': ' + yLabel; 
     } else if (t.datasetIndex === 1) { 
     var xLabel = d.datasets[t.datasetIndex].label; 
     var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel; 
     return xLabel + ': ' + yLabel; 
     } 
    } 
} 

ᴡᴏʀᴋɪɴɢ

var labelsarr = ["Red 12", "Red 13", "Yellow 12", "Yellow 13", "Blue 12", "Blue 13"]; 
 

 
var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: labelsarr, 
 
     datasets: [{ 
 
     type: 'line', 
 
     fill: false, 
 
     label: 'Percent', 
 
     backgroundColor: 'rgba(255,0,0,1)', 
 
     borderColor: 'rgba(255,0,0,1)', 
 
     data: [3, 4, 10, 5, 8, 7], 
 
     }, { 
 
     data: [12, 19, 3, 5, 2, 3], 
 
     label: 'Total Revenue', 
 
     backgroundColor: 'rgba(0, 129, 214, 0.8)', 
 
     }] 
 
    }, 
 
    options: { 
 
     tooltips: { 
 
     callbacks: { 
 
      label: function(t, d) { 
 
       if (t.datasetIndex === 0) { 
 
        var xLabel = d.datasets[t.datasetIndex].label; 
 
        var yLabel = t.yLabel + '%'; 
 
        return xLabel + ': ' + yLabel; 
 
       } else if (t.datasetIndex === 1) { 
 
        var xLabel = d.datasets[t.datasetIndex].label; 
 
        var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel; 
 
        return xLabel + ': ' + yLabel; 
 
       } 
 
      } 
 
     } 
 
     }, 
 
     legend: { 
 
     display: false, 
 
     position: 'top', 
 
     }, 
 
     scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true, 
 
       callback: function(value, index, values) { 
 
        if (parseInt(value) >= 1000) { 
 
        return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
        } else { 
 
        return '$' + value; 
 
        } 
 
       } 
 
      } 
 
     }] 
 
     } 
 
    }, 
 
    plugins: [{ 
 
     beforeDraw: function(chart) { 
 
     var labels = chart.data.labels; 
 
     labels.forEach(function(e, i) { 
 
      var bar = chart.data.datasets[1]._meta[0].data[i]._model; 
 
      var dataPoint = e.split(/\s/)[1]; 
 
      if (dataPoint === '12') 
 
       bar.backgroundColor = 'blue'; 
 
      else if (dataPoint === '13') 
 
       bar.backgroundColor = 'orange'; 
 
     }); 
 
     } 
 
    }] 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="myChart"></canvas>

ᴇxᴀᴍᴘʟᴇいくつかの構文の問題をそれらを慎重に探してください。

関連する問題