在chart.js中添加自定义标题到工具提示

Question

在chart.js中添加自定义标题到工具提示

3

在 chart.js 中，我想使用字符串数组自定义工具提示标签。尝试了不同的方法，但无法获得期望的结果。它没有替换所有标签，而是在每个数据集的工具提示中显示所有数组值。我还尝试了循环，以下是代码 pen 链接: 没有循环: https://codepen.io/tumulalmamun/pen/yvNaKY 有循环: https://codepen.io/tumulalmamun/pen/oEXzaq

var tooltipsLabel = ['Dhaka','Rajshahi','NewYork','London']     

var chartList = [5,6,7,8];
            
           
       function chart(){
        var ctx = document.getElementById("myChart").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Red", "Blue","green","Yellow"],
                    datasets: [{
                        label: '# of Votes',
                        data: chartList,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                           'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                             'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    },
                  tooltips: {
                    mode: 'index',
                    intersect: true,
                  
                    callbacks: {

                        title: function (tooltipItem, data) {
                          for(var i = 0; i < data.labels.length; i++)
                            {
                                 return tooltipsLabel[i];    
                            }
                       
                          
                           
                        }
                    }
                }
                }
            });
             
       }
    
       chart();

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <div class="row">
            <div class="col-lg-4">
                    <canvas id="myChart" width="100" height="100"></canvas>
            </div>
            
            <div class="col-lg-4"><canvas id="pieChart" width="100" height="100"></canvas></div>
        </div>
        <script>
       
            
            </script>
    </body>
</html>

var tooltipsLabel = ['Dhaka','Rajshahi','NewYork','London']     

var chartList = [5,6,7,8];
            
           
       function chart(){
        var ctx = document.getElementById("myChart").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Red", "Blue","green","Yellow"],
                    datasets: [{
                        label: '# of Votes',
                        data: chartList,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                           'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                             'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    },
                  tooltips: {
                    mode: 'index',
                    intersect: true,
                  
                    callbacks: {

                        title: function (tooltipItem, data) {
                          
                          return tooltipsLabel;
                           
                        }
                    }
                }
                }
            });
             
       }
    
       chart();

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <div class="row">
            <div class="col-lg-4">
                    <canvas id="myChart" width="100" height="100"></canvas>
            </div>
            
            <div class="col-lg-4"><canvas id="pieChart" width="100" height="100"></canvas></div>
        </div>
        <script>
       
            
            </script>
    </body>
</html>

- Abdullah Al Mamun

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- beaver · Accepted Answer

使用tooltipItem属性的索引值，可以在tooltipsLabel数组中引用相应的元素：

var tooltipsLabel = ['Dhaka', 'Rajshahi', 'NewYork', 'London']

var chartList = [5, 6, 7, 8];


function chart() {
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "green", "Yellow"],
      datasets: [{
        label: '# of Votes',
        data: chartList,
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      tooltips: {
        mode: 'index',
        intersect: true,
        callbacks: {
          title: function(tooltipItem, data) {
            console.log(tooltipItem);
            return tooltipsLabel[tooltipItem[0].index];
          }
        }
      }
    }
  });

}

chart();

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-lg-4">
    <canvas id="myChart" width="100" height="100"></canvas>
  </div>
  <div class="col-lg-4"><canvas id="pieChart" width="100" height="100"></canvas></div>
</div>