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");
});