工具提示未按预期显示时定制 [英] tooltip is not shown as expected when customized
问题描述
我正在研究angularjs google图表。我想定制工具提示。
在我的工具提示中，我想显示多个系列数据以及演示中显示的一些文本 https://plnkr.co/edit/orQchHKMeErVesXW2M0u?p=preview
我想查看图例和工具提示中显示的值旁边的值的标题，如< a href =https://plnkr.co/edit/6iw39IRFY7mwdQzjAVR6?p=preview =nofollow noreferrer> https://plnkr.co/edit/6iw39IRFY7mwdQzjAVR6?p=preview
在上述plunker中，我没有自定义工具提示，所以它按预期工作，但是当我在工具提示中自定义文本时，如第一次plunker链接所示（用Jan - 7月...）工具提示未按预期显示。
任何建议？
js code：
'严格使用';
$ b angular.module（'google-chart-example'，['googlechart']）。controller（MainCtrl，function（$ scope）{
var createChart =函数（行，标签）{
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 = {
角色：tooltip，
类型：string，
p：{
' html'：true
}
};
var data = [
{c：[{v：First Series}，{v：Jan - July+\\\
+ 63+\ n+30+\ n+33}，{v：63}，{v：30}，{v： }]，
{c：[{v：Second series}，{v：Aug - Sept+\\\
+70+\ n+35+\\\
+35}，{v：70}，{v：35}，{v：35}] $ b {c：[{v：Third series}，{v：Oct - Dec+\\\
+80+\\\
+40+ \\\
+40}，{v：80}，{v：40}，{v：40}]}
];
$ scope.myChart = createChart（data，Data Series）;
}）;
如果您使用连续轴（'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：第二系列}，
{v：2，f：第三系列}
]
}，
其他选项包含在以下代码片段中，
用于格式化与我们类似的图表一个离散轴（'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：八月至九月}，{v：70} ，{v：35}，{v：35}]}，{c：[{v：2，f：Oct - Dec ：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> $ b UPDATE
放置...
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： 比萨，类型：数字}，
{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 ：第二辑}，
{v：2，f：第三辑}
]
}，
工具提示：{
text ：'value'
}
}
}
};
var data = [
{c：[{v：0，f：Jan - July}，{v：63}，{ v：30}，{v：33}]}，
{c：[{v：1，f：8月-9月 v：70}，{v：35}，{v：35}]}，
{c：[{v：2，f： 10月 - 12月}，{v：80}，{v：40}，{v：40}]}
];
I am working on angularjs google charts. I want to customize the tooltip. In my tooltip i want to show the multiple series data as well as some text as shown in the demo https://plnkr.co/edit/orQchHKMeErVesXW2M0u?p=preview I want to see the legend and the title of the value beside the value displayed in the tooltip as shown in the https://plnkr.co/edit/6iw39IRFY7mwdQzjAVR6?p=preview
In the above plunker, i'm not customizing the tooltip and so it works as expected but when i customized the text in tooltip as shown in first plunker link(replaced First Series with Jan - July ...) the tooltip is not shown as expected. Any advices?
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");
});
if you use a continuous axis ('number', 'date', 'timeofday', etc...) for the first column,
you can provide the tooltip value as the formatted value (f:)
{"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]},
then use hAxis.ticks for the axis labels
use the same object notation to set the label value
hAxis: {
ticks: [
{"v": 0, "f":"First Series"},
{"v": 1, "f":"Second Series"},
{"v": 2, "f":"Third Series"}
]
},
other options are included in the following snippet,
to format the chart similar to using a discrete axis ('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>
UPDATE
placing the above changes in angular...
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"}]}
];
这篇关于工具提示未按预期显示时定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
