language - javascript tutorial
il suggerimento non viene mostrato come previsto se personalizzato (1)
se usi un asse continuo ( 'number'
, 'date'
, 'timeofday'
, ecc ...) per la prima colonna,
puoi fornire il valore del tooltip come valore formattato ( f:
{"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]},
quindi utilizzare hAxis.ticks
per le etichette degli assi
utilizzare la stessa notazione oggetto per impostare il valore dell'etichetta
hAxis: {
ticks: [
{"v": 0, "f":"First Series"},
{"v": 1, "f":"Second Series"},
{"v": 2, "f":"Third Series"}
]
},
altre opzioni sono incluse nel seguente snippet,
per formattare il grafico in modo simile all'utilizzo di un asse discreto ( '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>
AGGIORNARE
posizionando le suddette modifiche in angolare ...
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"}]}
];
Sto lavorando su grafici di google angularjs. Voglio personalizzare il suggerimento. Nel mio tooltip voglio mostrare i dati delle serie multiple e del testo come mostrato nella demo https://plnkr.co/edit/orQchHKMeErVesXW2M0u?p=preview Voglio vedere la legenda e il titolo del valore accanto al valore visualizzato nel tooltip come mostrato in https://plnkr.co/edit/6iw39IRFY7mwdQzjAVR6?p=preview
Nel plunker sopra, non sto personalizzando il tooltip e quindi funziona come previsto ma quando ho personalizzato il testo in tooltip come mostrato nel primo link plunker (sostituito First Series con Jan - July ...) il tooltip non è mostrato come previsto. Qualche consiglio?
codice js:
'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");
});