nnnick chart.js - 折线图上的自定义工具提示

1 回答

• 4

  因此，您可以使用较新的（不确定何时包含）图表js版本中的自定义工具提示功能来实现此目的 . 您可以让它显示您想要的任何内容，而不是正常的工具提示，因此在这种情况下，我添加了工具提示和工具提示概述 .

  真正讨厌的事情是，虽然在这个函数中你没有被告知你当前正在显示工具提示的索引 . 解决这个问题的两种方法是覆盖showToolTip函数，以便它实际传递这些信息，或者做一个快速的小工具从工具提示文本中提取标签并从标签数组中获取索引（hacky但更快，所以我去了这个例）

  所以这是一个基于chartjs samples文件夹中的示例的快速示例 . 这只是一个简单的例子，所以你很可能需要玩定位和东西直到你需要的东西 .

  Chart.defaults.global.pointHitDetectionRadius = 1;
  Chart.defaults.global.customTooltips = function(tooltip) {
      // Tooltip Element
    var tooltipEl = $('#chartjs-tooltip');
    var tooltipOverviewEl = $('#chartjs-tooltip-overview');
    // Hide if no tooltip
    if (!tooltip) {
      tooltipEl.css({
        opacity: 0
      });
      tooltipOverviewEl.css({
        opacity: 0
      });
      return;
    }
  
    //really annoyingly we don;t get told which index this comes from so going to have
    //to extract the label from the text :( and then find the index based on that
    //other option here is to override the the whole showTooltip in chartjs and have the index passed
    var label = tooltip.text.substr(0, tooltip.text.indexOf(':'));
    var labelIndex = labels.indexOf(label);
    var maleEnrolmentNumber = maleEnrolments[labelIndex];
    var femaleEnrolmentNumber = FemaleEnrolments[labelIndex];
    // Set caret Position
    tooltipEl.removeClass('above below');
    tooltipEl.addClass(tooltip.yAlign);
    // Set Text
    tooltipEl.html(tooltip.text);
    //quick an ddirty could use an actualy template here
    var tooltipOverviewElHtml = "<div> Overall : " + (maleEnrolmentNumber + femaleEnrolmentNumber) + "</div>";
    tooltipOverviewElHtml += "<div> Male : " + (maleEnrolmentNumber) + "</div>";
    tooltipOverviewElHtml += "<div> Female : " + (femaleEnrolmentNumber) + "</div>";
  
    tooltipOverviewEl.html(tooltipOverviewElHtml);
    // Find Y Location on page
    var top;
    if (tooltip.yAlign == 'above') {
      top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
    } else {
      top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
    }
    // Display, position, and set styles for font
    tooltipEl.css({
      opacity: 1,
      left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
      top: tooltip.chart.canvas.offsetTop + top + 'px',
      fontFamily: tooltip.fontFamily,
      fontSize: tooltip.fontSize,
      fontStyle: tooltip.fontStyle,
    });
  
    tooltipOverviewEl.css({
      opacity: 1,
      fontFamily: tooltip.fontFamily,
      fontSize: tooltip.fontSize,
      fontStyle: tooltip.fontStyle,
    });
  };
  var maleEnrolments = [5, 20, 15, 20, 20, 30, 50]; // Integer array for male each value is corresponding to each month
  
  var FemaleEnrolments = [5, 0, 15, 20, 30, 30, 20]; // Integer array for Female each value is corresponding to each month
  
  var labels = ["Jan", "February", "March", "April", "May", "June", "July"]; //Enrollment by Month
  var lineChartData = {
    labels: labels,
    datasets: [{
      label: "Student Details",
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(151,187,205,1)",
      data: [10, 20, 30, 40, 50, 60, 70], //enrollement Details overall (Male + Female)
    }]
  };
  var ctx2 = document.getElementById("chart2").getContext("2d");
  window.myLine = new Chart(ctx2).Line(lineChartData, {
    responsive: true
  });
  

  #canvas-holder1 {
       width: 300px;
       margin: 20px auto;
   }
   #canvas-holder2 {
       width: 50%;
       margin: 20px 25%;
      position:relative;
   }
   #chartjs-tooltip-overview {
       opacity: 0;
       position: absolute;
       background: rgba(0, 0, 0, .7);
       color: white;
       padding: 3px;
       border-radius: 3px;
       -webkit-transition: all .1s ease;
       transition: all .1s ease;
       pointer-events: none;
       -webkit-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
       left:200px;
       top:0px
   }
   #chartjs-tooltip {
       opacity: 1;
       position: absolute;
       background: rgba(0, 0, 0, .7);
       color: white;
       padding: 3px;
       border-radius: 3px;
       -webkit-transition: all .1s ease;
       transition: all .1s ease;
       pointer-events: none;
       -webkit-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
   }
   .chartjs-tooltip-key {
       display:inline-block;
       width:10px;
       height:10px;
   }
  

  <script src="https://raw.githack.com/nnnick/Chart.js/master/Chart.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="canvas-holder2">
    <div id="chartjs-tooltip-overview"></div>
    <div id="chartjs-tooltip"></div>
    <canvas id="chart2" width="600" height="600" />
  </div>
  

  回复于 2024-04-20T06:09:53+08:00