自定义具有多个值的工具提示
我正在研究angularjs谷歌图表堆积栏。我想定制堆叠栏上显示的工具提示数据,想要在堆叠栏上的鼠标悬停上显示该栏的所有堆栈信息(目前只显示当前鼠标悬停在堆栈上的信息)。工具提示应显示状态1:30,状态2:60,状态3:40,并且在第二栏上的鼠标悬停时,工具提示应显示状态1:9,状态2:33,状态3:状态2:状态2: 12。请指教。我尝试使用下面的选项,但它不工作。自定义具有多个值的工具提示
tooltip: {
shared:true
}
JS代码:
var app = angular.module('myApp', ["googlechart"]);
app.controller('myController', function ($scope) {
$scope.chart = {};
$scope.chart.options = {
'fontSize': '12',
"isStacked": "true",
};
$scope.chart.type = "ColumnChart";
$scope.chart.cssStyle = "height:500px; width:600px;";
var annotations={
role : "annotation",
type : "string",
p : {
role : "annotation"
}
};
$scope.chart.data = {
"cols": [
{ id: "status", label: "Status", type: "string" },
{ id: "statusCount", label: "status1", type: "number"},
{ id: "statusCount2", label: "status2", type: "number"},
{ id: "statusCount3", label: "status3", type: "number"},
]
};
$scope.loadDataToDrawChart =
function(response) {
$scope.responseData = response;
var rows = [];
var row = null;
var jsonData = [{"spID":100,"spValue":30,"spStatus":"recent","name":"jtest"},
{"spID":100,"spValue":60,"spStatus":"old","name":"jtest"},{"spID":100,"spValue":40,"spStatus":"recent","name":"jtest"},
{"spID":222,"spValue":9,"spStatus":"done","name":"mtest"},
{"spID":222,"spValue":33,"spStatus":"inprogress","name":"mtest"},
{"spID":222,"spValue":12,"spStatus":"inprogress","name":"mtest"}];
var rows = [];
var row = null;
var id = null;
jsonData.forEach(function (value, key) {
if (id !== value.spID) {
id = value.spID;
if (row !== null) {
rows.push(row);
}
row = {c: [{v: value.spID}]};
}
row.c.push({v: value.spValue});
});
rows.push(row);
$scope.chart.data.rows = rows;
}
$scope.loadDataToDrawChart();
$scope.$on('loadChart',function(event){
$scope.loadDataToDrawChart();
});
$scope.chart.formatters = {};
$scope.switch = function (chartType) {
$scope.chart.type = chartType;
AxisTransform();
};
AxisTransform = function() {
tempvAxis = $scope.chart.options.vAxis;
temphAxis = $scope.chart.options.hAxis;
$scope.chart.options.vAxis = temphAxis;
$scope.chart.options.hAxis = tempvAxis;
};
});
我已经通过链接https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#enabling_html_tooltip走了,但不能能够履行其作为我没有使用google.visualization显示图表实施的方式。建议会有帮助。
试试下面的图表选项覆盖了“ngChart”的行为......
focusTarget: 'category'
工具提示将显示所有给定x轴值的类别值...
你可以通过创建唯一的连接功能的新指令,如下面的 app.directive("ngChart",function(){ return function (scope,elem,attr){ //and here you can customizing "ngChart" as needed} })
请查看演示http://plnkr.co/edit/ahg7JiBpOfIGIy0f3Mat?p=preview。由于我没有使用google.visualization这些功能不支持。 – user3684675
任何建议都会有所帮助。 – user3684675
我尝试在选项中保留focusTarget,但它并未在工具提示上显示所有堆栈值。请查看演示http://plnkr.co/edit/LAbAQr7HeFEqACawUCCd?p=preview。 – user3684675
它不应该是'tooltip'和独立的一部分,类似于'isStacked:true' - > [plnkr.co/edit/sG5EfcTjjAtG9gC3cgb8?p=preview](http://plnkr.co/edit/sG5EfcTjjAtG9gC3cgb8 ?p =预览) – WhiteHat
真棒,它工作。谢谢 – user3684675