在工具提示内添加一些文本
Posted
技术标签:
【中文标题】在工具提示内添加一些文本【英文标题】：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【问题讨论】：
【参考方案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" ></canvas>
</div>
</body>编辑：要操作工具提示中的文本，您可以在图表的选项中定义模板。你有可能：
multiTooltipTemplate 用于多个数据集
tooltipTemplate 用于单个数据集
对于multiTooltipTemplate，无法更改工具提示的标题，如果您想这样做，您需要定义自己的自定义工具提示。
这是因为multiTooltipTemplate 默认将 x 轴的标签作为工具提示标题。
（来源：https://***.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" ></canvas>
</div>
</body>【讨论】：
感谢您的帮助！我想让列中的数字只显示，当你有图形的光标时，你会显示带有文本“标签”的数字。我不希望文本“标签”显示在列中。列中只能看到数字。请告诉您是否需要更多信息！以上是关于在工具提示内添加一些文本的主要内容，如果未能解决你的问题，请参考以下文章
Angular UI-Select：如何为文本溢出添加工具提示？