2017-07-30 56 views
0

我正在用Chart.JS创建一个组合图表,它是一个条形/线条组合。 dataset[0]的标签我想用%标志和dataset[1]的标签显示,我想用$标志显示。现在,当我参考标签时,我的意思是当您将鼠标悬停在条形图上时显示的内容,并显示信息。我尝试下面的语法,但是这甚至不会有一个图表显示(我改变了我的代码中添加一个if声明,试图占dataset[0] & dataset[1]Chart.JS不同的数据集格式标签

什么是有dataset[0]正确的方式显示%标志和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; 
     } 
    } 
} 

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

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>

一些语法问题已经修好了,仔细找那些。