我正在开发angularjs谷歌排行榜。我想自定义工具提示。 在我的工具提示中,我想显示多个系列数据以及演示https://plnkr.co/edit/orQchHKMeErVesXW2M0u?p=preview中显示的一些文字 我希望在https://plnkr.co/edit/6iw39IRFY7mwdQzjAVR6?p=preview
中显示工具提示中显示的值旁边的图例和值标题在上面的plunker中,我没有自定义工具提示,所以它按预期工作,但当我在工具提示中自定义文本,如第一个plunker链接所示(替换First Series与Jan - July ...)工具提示未按预期显示。 有什么建议吗?
js code:
'use strict';
angular.module('google-chart-example', ['googlechart']).controller("MainCtrl", function ($scope) {
var createChart = function (rows, label) {
return {
"type": "ColumnChart",
"data": {
"cols": [
{"id": label, "label": label, "type": "string"},toolTipVar,
{"id": "count", "label": "count", "type": "number"},
{"id": "pizza", "label": "Pizza", "type": "number"},
{"id": "softdrink", "label": "Softdrink", "type": "number"}
],
"rows": rows
},
"options": {
"title": label,
"isStacked": "true",
focusTarget: 'category',
// "displayExactValues": true
"tooltip": {'text' : 'value' },
}
}
};
var toolTipVar = {
role: "tooltip",
type: "string",
p: {
'html': true
}
};
var data = [
{"c":[{"v":"First Series"},{"v":"Jan - July" + "\n" + "63" + "\n" + "30" + "\n" + "33"},{"v":63},{"v":"30"},{"v":"33"}]},
{"c":[{"v":"Second series"},{"v":"Aug - Sept" + "\n" + "70" + "\n" + "35" + "\n" + "35"},{"v":70},{"v":"35"},{"v":"35"}]},
{"c":[{"v":"Third series"},{"v":"Oct - Dec" + "\n" + "80" + "\n" + "40" + "\n" + "40"},{"v":80},{"v":"40"},{"v":"40"}]}
];
$scope.myChart = createChart(data, "Data Series");
});
答案 0 :(得分:1)
如果您对第一列使用continuous axis('number'
,'date'
,'timeofday'
等...),
您可以提供工具提示值作为格式化值(f:
)
{"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]},
然后使用hAxis.ticks
作为轴标签
使用相同的对象表示法来设置标签值
hAxis: {
ticks: [
{"v": 0, "f":"First Series"},
{"v": 1, "f":"Second Series"},
{"v": 2, "f":"Third Series"}
]
},
其他选项包含在以下代码段中,
格式化图表类似于使用离散轴('string'
)
google.load('visualization', '1.1', {
packages: ['corechart'],
callback: drawChart
});
function drawChart() {
var data = new google.visualization.DataTable({
"cols": [
{"id": 'title', "label": 'title', "type": "number"},
{"id": "count", "label": "count", "type": "number"},
{"id": "pizza", "label": "Pizza", "type": "number"},
{"id": "softdrink", "label": "Softdrink", "type": "number"}
],
"rows": [
{"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]},
{"c":[{"v": 1, "f":"Aug - Sept"},{"v":70},{"v":"35"},{"v":"35"}]},
{"c":[{"v": 2, "f":"Oct - Dec"},{"v":80},{"v":"40"},{"v":"40"}]}
]
});
options = {
title: 'title',
isStacked: true,
focusTarget: 'category',
hAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
slantedText: false,
ticks: [
{"v": 0, "f":"First Series"},
{"v": 1, "f":"Second Series"},
{"v": 2, "f":"Third Series"}
]
},
tooltip: {
text: 'value'
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
&#13;
更新
将上述更改置于角度...
var createChart = function (rows, label) {
return {
"type": "ColumnChart",
"data": {
"cols": [
{"id": label, "label": label, "type": "number"},
{"id": "count", "label": "count", "type": "number"},
{"id": "pizza", "label": "Pizza", "type": "number"},
{"id": "softdrink", "label": "Softdrink", "type": "number"}
],
"rows": rows
},
"options": {
title: 'title',
isStacked: true,
focusTarget: 'category',
hAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
slantedText: false,
ticks: [
{"v": 0, "f":"First Series"},
{"v": 1, "f":"Second Series"},
{"v": 2, "f":"Third Series"}
]
},
tooltip: {
text: 'value'
}
}
}
};
var data = [
{"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]},
{"c":[{"v": 1, "f":"Aug - Sept"},{"v":70},{"v":"35"},{"v":"35"}]},
{"c":[{"v": 2, "f":"Oct - Dec"},{"v":80},{"v":"40"},{"v":"40"}]}
];