javascript - validacion - información sobre herramientas no se muestra como se esperaba cuando se personaliza

validar formulario javascript html5

Question

Estoy trabajando en angularjs google charts. Quiero personalizar la información sobre herramientas. En mi información sobre herramientas, quiero mostrar los datos de series múltiples, así como algunos textos, como se muestra en la demostración https://plnkr.co/edit/orQchHKMeErVesXW2M0u?p=preview Quiero ver la leyenda y el título del valor al lado del valor que se muestra en la información sobre herramientas como se muestra en https://plnkr.co/edit/6iw39IRFY7mwdQzjAVR6?p=preview

En el anterior plunker, no estoy personalizando la información sobre herramientas y por lo tanto funciona como se esperaba, pero cuando personalicé el texto en la información sobre herramientas como se muestra en el primer enlace de plunker (reemplazado First Series con enero-julio ...) la información sobre herramientas no se muestra como esperado. ¿Algún consejo?

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

Answer 1

si usa un eje continuo ( ''number'' , ''date'' , ''timeofday'' , etc. ...) para la primera columna,

puede proporcionar el valor de información sobre herramientas como el valor formateado ( f:

{"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]},

luego use hAxis.ticks para las etiquetas de los ejes
use la misma notación de objeto para establecer el valor de la etiqueta

hAxis: {
  ticks: [
    {"v": 0, "f":"First Series"},
    {"v": 1, "f":"Second Series"},
    {"v": 2, "f":"Third Series"}
  ]
},

otras opciones están incluidas en el siguiente fragmento,
formatear el gráfico de forma similar al uso de un eje 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>

ACTUALIZAR

colocando los cambios anteriores en 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"}]}
  ];