如何在 angular 图表的自定义工具提示中使用 HTML?
How to use HTML in custom tooltip in angular charts?
是否可以使用 angular-chart 1.0 在图表的工具提示中呈现 HTML?
我已经构建了下面的图表,但需要在工具提示的不同行上呈现两个值,但是 br 标签显示为文本
<div ng-app="doughnutApp" ng-controller="DoughnutCtrl as doughnutCtrl">
<canvas id="doughnut"
class="chart chart-doughnut"
chart-data="doughnutCtrl.labelsValues.values"
chart-labels="doughnutCtrl.labelsValues.labels"
chart-options="doughnutCtrl.chartOptions">
</canvas>
</div>
<script>
var app = angular.module('doughnutApp', ['chart.js']);
app.controller('DoughnutCtrl', function() {
var vm = this;
vm.labelsValues = {
"labels": ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8"],
"values": [1, 2, 3, 4, 5, 6, 7, 8]
};
vm.chartOptions = {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return "Line 1<br/>Line 2";
}
}
}
};
});
</script>
在这里工作的 plunker:http://plnkr.co/jtOM2PIccrb87wmFZc0p
一种解决方法是将一行放在 "label" 回调中,将另一行放在 "beforeLabel" 回调中,但这仍然不会呈现颜色、字体样式等
您应该为 "simulate" 新行使用数组:
tooltips: {
//mode: "label",
callbacks: {
label: function(tooltipItem, data) {
var legend = new Array();
for(var i in data.datasets){
legend.push(
data.datasets[i].label + ": " + parseFloat(data.datasets[i].data[tooltipItem.index])
);
}
return legend;
}
}
},
是否可以使用 angular-chart 1.0 在图表的工具提示中呈现 HTML? 我已经构建了下面的图表,但需要在工具提示的不同行上呈现两个值,但是 br 标签显示为文本
<div ng-app="doughnutApp" ng-controller="DoughnutCtrl as doughnutCtrl">
<canvas id="doughnut"
class="chart chart-doughnut"
chart-data="doughnutCtrl.labelsValues.values"
chart-labels="doughnutCtrl.labelsValues.labels"
chart-options="doughnutCtrl.chartOptions">
</canvas>
</div>
<script>
var app = angular.module('doughnutApp', ['chart.js']);
app.controller('DoughnutCtrl', function() {
var vm = this;
vm.labelsValues = {
"labels": ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8"],
"values": [1, 2, 3, 4, 5, 6, 7, 8]
};
vm.chartOptions = {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return "Line 1<br/>Line 2";
}
}
}
};
});
</script>
在这里工作的 plunker:http://plnkr.co/jtOM2PIccrb87wmFZc0p
一种解决方法是将一行放在 "label" 回调中,将另一行放在 "beforeLabel" 回调中,但这仍然不会呈现颜色、字体样式等
您应该为 "simulate" 新行使用数组:
tooltips: {
//mode: "label",
callbacks: {
label: function(tooltipItem, data) {
var legend = new Array();
for(var i in data.datasets){
legend.push(
data.datasets[i].label + ": " + parseFloat(data.datasets[i].data[tooltipItem.index])
);
}
return legend;
}
}
},