在工具提示内添加一些文本答案

【问题标题】：Add some Text Inside of the Tooltip在工具提示内添加一些文本
【发布时间】：2016-01-17 16:33:48
【问题描述】：

目标：
当我有光标显示工具提示时，我想添加月份的名称，然后显示数字

问题：
我不知道如何在 Chartjs 版本 1 中做到这一点

信息：

X 角为日期
请记住，月份名称会根据用户从下拉列表中的选择而改变。这个月是动态的。为了使数据是动态的，我将数据放在一个输入框中，然后将它发送到 Chart JS。
如果可能，在 JSBin 或 JSfiddle 中显示解决方案。
http://jsbin.com/mofeqavicu/edit?html,output

【问题讨论】：

标签： chart.js

【解决方案1】：

我不确定我是否正确理解了您的问题，但标签是在数组中定义的

labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

你可以改成

labels: ['Label 1','Label 2','Label 3','Label 4','Label 5','Label 6', 'Label 7', 8, 9, 10]

您还可以定义要在displayLineChart 中使用的标签数组。

var myLabels = ['Label 1','Label 2','Label 3','Label 4','Label 5','Label 6', 'Label 7', 8, 9, 10];

  function displayLineChart() {
    var data = {
      labels: myLabels,
      datasets: [{
        label: "First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
      }, {
        label: "Second dataset",
        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: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
      }]
    };
    var ctx = document.getElementById("lineChart").getContext("2d");
    var options = {};
    var lineChart = new Chart(ctx).Line(data, options);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>


<body onload="displayLineChart();">
  <div class="box">
    <canvas id="lineChart" height="450" width="800"></canvas>
  </div>
</body>

编辑：要操作工具提示中的文本，您可以在图表的选项中定义模板。你有可能：

multiTooltipTemplate 用于多个数据集
tooltipTemplate 用于单个数据集

对于multiTooltipTemplate，无法更改工具提示的标题，如果您想这样做，您需要定义自己的自定义工具提示。这是因为multiTooltipTemplate 默认将 x 轴的标签作为工具提示标题。

（来源：https://stackoverflow.com/a/28579665/2314737 和 https://github.com/nnnick/Chart.js/issues/499）

以下是单个数据集的示例：

var myLabels = [1,2,3,4,5,6,7,8,9,10];

  function displayLineChart() {
    var data = {
      labels: myLabels,
      datasets: [{
        label: "First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
      },]
    };
    var ctx = document.getElementById("lineChart").getContext("2d");
    // define multiTooltip template
    var options = {
    multiTooltipTemplate: "My Text <%= datasetLabel %> - <%= value %>",   
    // tooltipTemplate is activated only when there's just one dataset
    tooltipTemplate: "Label <%= label %>",
    };
    
    var lineChart = new Chart(ctx).Line(data, options);
    
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

<body onload="displayLineChart();">
  <div class="box">
    <canvas id="lineChart" height="450" width="800"></canvas>
  </div>
</body>

【讨论】：

感谢您的帮助！我想让列中的数字只显示，当你有图形的光标时，你会显示带有文本“标签”的数字。我不希望文本“标签”显示在列中。列中只能看到数字。请告诉您是否需要更多信息！