javascript - donut - js plotly

nvd3 piechart.js-¿Cómo editar la información sobre herramientas?

Question

Estoy usando el componente piechart.js de nvd3 para generar un piechart en mi sitio. El archivo .js proporcionado incluye varias var''s, de la siguiente manera:

var margin = {top: 30, right: 20, bottom: 20, left: 20}
    , width = null
    , height = null
    , showLegend = true
    , color = nv.utils.defaultColor()
    , tooltips = true
    , tooltip = function(key, y, e, graph) {
        return ''<h3>'' + key + ''</h3>'' +
               ''<p>'' +  y + ''</p>''
      }
    , noData = "No Data Available."
    , dispatch = d3.dispatch(''tooltipShow'', ''tooltipHide'')
;

En mi js en línea, he podido anular algunas de esas variables, como esta (anulando showLegend y margin):

var chart = nv.models.pieChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .showLabels(false)
    .showLegend(false)
    .margin({top: 10, right: 0, bottom: 0, left: 0})
    .donut(true);

Intenté sobrescribir la información sobre herramientas de la misma manera:

.tooltip(function(key, y, e, graph) { return ''Some String'' })

pero cuando hago eso, mi gráfico no se muestra en absoluto. ¿Por qué no puedo sobrescribir la información sobre herramientas aquí? ¿Hay alguna otra forma en que pueda hacerlo? Preferiría no tener que editar piechart.js en absoluto; Necesito mantener ese archivo genérico para su uso en múltiples widgets.

Y mientras estamos en ello, ¿hay alguna forma en que pueda hacer que toda la información sobre herramientas se convierta en un enlace cliqueable?

Answer 1

Acabo de tener el mismo problema, con nvd3 1.8.1, y esta es la solución que he encontrado.

Sin la opción useInteractiveGuideline , simplemente podría declarar su herramienta de generación de la función en chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE}) :

El argumento d está dado por nvd3 cuando se llama a la información sobre herramientas, y tiene tres propiedades:

• value : el valor del eje x para la posición del cursor
• index : el índice en el datum del gráfico correspondiente a la posición del cursor
• series : una matriz que contiene, para cada elemento en la tabla:
  • key : la clave de leyenda para ese elemento
  • value : el valor del eje y para ese elemento en la posición del cursor
  • color : el color la leyenda para ese artículo

Entonces aquí tienes un ejemplo:

chart.tooltip.contentGenerator(function (d) {
          var html = "<h2>"+d.value+"</h2> <ul>";

          d.series.forEach(function(elem){
            html += "<li><h3 style=''color:"+elem.color+"''>"
                    +elem.key+"</h3> : <b>"+elem.value+"</b></li>";
          })
          html += "</ul>"
          return html;
        })

Nota IMPORTANTE

Cuando se usa la opción useInteractiveGuideline , el objeto chart.tooltip no se utiliza para generar la información sobre herramientas, sino que debe usar chart.interactiveLayer.tooltip , es decir:

this.chart.interactiveLayer.tooltip.contentGenerator(function (d) { ... })

Espero que la respuesta sea útil para ti, incluso si es tarde.

Answer 2

Creo que le falta el parámetro ''x'' en su función de información sobre herramientas. El formato de la llamada a la función es:

function(key, x, y, e, graph)

Answer 3

Para agregar respuestas anteriores, a veces desea usar los datos de la serie y no solo de x y y . Por ejemplo cuando

data = {''values'': [{''month'': 1, ''count'': 2}, ...], ''key'': ''test'' }

Para esas situaciones, use

.tooltip(function(key, x, y, e, graph) {
         var d = e.series.values[e.pointIndex];
         return ''<h3>'' + e.series.key + ''</h3><p>'' + d.month.toString() + ...;
 });

e.series es la serie particular que está e.series el mouse, e.pointIndex es el índice de los valores de la serie. Aquí e.series.key == key , pero solía empatizar con lo que es e.series .

Answer 4

Si usa el envoltorio Angular NVD3 , la forma de configurar el envoltorio personalizado es a través de las opciones del gráfico, simplemente:

$scope.options = {
  chart: {
  ...
  tooltip: {
      contentGenerator: function(d) {
          return d.series[0].key + '' '' + d.series[0].value;
      }
  },
  ...
  }
};

Answer 5

Solo anule de esta manera definitivamente funcionará

function tooltipContent(key, y, e, graph) {
            return ''<h3>'' + key + ''</h3>'' +''<p>'' + y + ''</p>'' ;
        }

O

tooltipContent(function(key, y, e, graph) { return ''Some String'' })

Answer 6

Tooltip personalizado no puede existir con "useInteractiveGuideline".

Answer 7

interactive:true,
tooltips: true,
tooltip: {
  contentGenerator: function (d) {
    return ''<h3>PUT YOUR DATA HERE E.g. d.data.name</h3>''
  }
}

Answer 8

my_chart = nv.models.multiBarChart()
  .tooltip(function(key, x, y, e, graph) {
    return ''<h3>'' + key + ''</h3>'' +
           ''<p>'' +  y + '' on '' + x + ''</p>'';
  });

Answer 9

var chart = nv.models.multiBarChart();

chart.tooltip.contentGenerator(function (obj) {
                return JSON.stringify("<b>HOHO</b>")
            })

Esto funcionó para mí ...