自定义Chart.js工具提示

Question

 <script>
 var  passings = [["New York","5001","05/18 00:36","S 28 MPH"], ["Phili","5002","05/18 01:36","S 50 MPH"],  ["Richmond","5003","05/18 02:36","S 40 MPH"], ["Wilson","5004","05/18 03:36","S 30 MPH"],
                  ["Savannah","5005","05/18 04:36","S 29 MPH"],  ["Miami","5006","05/18 05:36","S 40 MPH"]]
   
    leftK1 =  ["20","30","50","20","30","40"]
    var labelL1 = "Rain %";   

   
    var ctx = document.getElementById("myChart").getContext("2d");
    var canvasWidth = 600;
   
    ctx.canvas.width = canvasWidth;
    ctx.canvas.height = 700;


    Chart.defaults.global.defaultFontSize = 14;
    Chart.defaults.global.defaultFontFamily = "Lato, sans-serif";
    var chartData = null;
    var chartOptions = null;
    
    var chartDataSets = [ {
      label : labelL1,
      fill : false,
      data : leftK1,
      borderColor : 'rgb(255, 99, 132)'
    } ];

    
    chartData = {
      labels : passings,
      datasets : chartDataSets
    }
    chartOptions = {
      responsive : true,
      maintainAspectRatio : false,
      elements : {
        line : {
          tension : 0, // disables bezier curves
        }
      },
      animation : {

      },

      legend : {
        display : true,
        position : 'top',
        labels : {
          fontColor : 'rgb(255, 99, 132)'
        }
      },
      title : {
        display : true,
        text : 'Passings Chart'
          },
      scales : {
        yAxes : [ {
          ticks : {
            max : 80,
            min : 0
          },
          gridLines : {
            zeroLineWidth : 5
          },
          scaleLabel : {
            display : true,
            labelString : "Rain Percantage",
            fontFamily : "Lato, sans-serif",
            fontSize : 18
          }
        } ],
        xAxes : [ {
          ticks : {
            autoSkip : false,
            maxTicksLimit : 15,
            maxRotation : 0,
            minRotation : 0,
            fontFamily : "Lato, sans-serif",
            fontSize : 12
          }
        } ]
      }
    // end scales
    }
    window.myChart = new Chart(ctx, {
      type : 'line',
      data : chartData,
      options : chartOptions
    });
              
         </script>    

 <h:form id="ChartForm">
    <div >  
      <canvas id="myChart"  ></canvas>          
     </div>    
  </h:form>

enter image description here我已将标签作为数组传递给图表（Chart.js版本2.7），因此我有多行X轴标签。显示为工具提示时，它显示每个工具提示的整个数组。我看过几个帖子，他们给出了从图例显示值和自定义Y轴数据的方法。 有没有办法将短形式的标签（X轴标签）显示为工具提示？

Answer 1

您可以使用Chart.js Documentatoin

中提到的回调

您甚至可以自定义工具提示，例如：

<header class="center">resize window vertically</header>
<section class="center">
  <div class="gauge">
    <div class="item1"></div>
    <div class="item2"></div>
  </div>
  <div class="container">
    <div class="item1">Haj</div>
    <div class="item2">Hlp</div>
  </div>
</section>

参见Samples 和more