javascript - Cómo cambiar el contenido de información sobre herramientas en c3js

d3.js c3.js (6)

Cuando tenemos un gráfico de barras apiladas y nos gustaría mostrar "Total" en la información sobre herramientas (pero no en el gráfico como una barra / pila), esto puede ser útil.

Los gráficos C3 utilizan una matriz para almacenar los datos para información sobre herramientas y antes de que se muestren, agregamos totales (o cualquier otro dato según nuestro requisito). Al hacer esto, aunque los totales no están disponibles como una pila, se muestra en la información sobre herramientas.

function key_for_sum(arr) { return arr.value; //value is the key }; function sum(prev, next) { return prev + next; } var totals_object = {}; totals_object.x = d[0][''x'']; totals_object.value = d.map(key_for_sum).reduce(sum); totals_object.name = ''total''; totals_object.index = d[0][''index'']; totals_object.id = ''total''; d.push(totals_object);

El código anterior se ha agregado para garantizar que el total esté disponible en

Información sobre el gráfico de barras apiladas C3.js

Estoy trabajando en una pantalla de línea de tiempo y tengo datos que quiero mostrar en la información sobre herramientas. actualmente solo muestra el valor en cada momento. y no puedo encontrar una manera de cambiarlo. el siguiente ejemplo muestra cómo cambiar el formato del valor pero no qué valores se muestran

se tomó de http://c3js.org/samples/tooltip_format.html admiten que no hay un ejemplo para la edición de contenido, pero no pude encontrar nada en la referencia ni en los foros, sino una sugerencia para cambiar el código ( está aquí: https://github.com/masayuki0812/c3/blob/master/c3.js en la línea 300) y más abajo:

__tooltip_contents = getConfig([''tooltip'', ''contents''], function (d, defaultTitleFormat, defaultValueFormat, color) { var titleFormat = __tooltip_format_title ? __tooltip_format_title : defaultTitleFormat, nameFormat = __tooltip_format_name ? __tooltip_format_name : function (name) { return name; }, valueFormat = __tooltip_format_value ? __tooltip_format_value : defaultValueFormat, text, i, title, value, name, bgcolor; for (i = 0; i < d.length; i++) { if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; } if (! text) { title = titleFormat ? titleFormat(d[i].x) : d[i].x; text = "<table class=''" + CLASS.tooltip + "''>" + (title || title === 0 ? "<tr><th colspan=''2''>" + title + "</th></tr>" : ""); } name = nameFormat(d[i].name); value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index); bgcolor = levelColor ? levelColor(d[i].value) : color(d[i].id); text += "<tr class=''" + CLASS.tooltipName + "-" + d[i].id + "''>"; text += "<td class=''name''><span style=''background-color:" + bgcolor + "''></span>" + name + "</td>"; text += "<td class=''value''>" + value + "</td>"; text += "</tr>"; } return text + "</table>"; })

¿Alguien intentó hacerlo? ¿Desarrolló alguna función para facilitar el proceso? ¿Tienes algún consejo sobre cómo hacerlo correctamente? No sé cómo cambiar su código de una manera que podría usar más datos o datos diferentes al valor d que obtiene la función.

En mi caso, tuve que agregar el día para el valor de fecha (eje x) en la información sobre herramientas. Finalmente se me ocurrió la siguiente solución

Referencias para js y css

https://code.jquery.com/jquery-3.2.1.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css

<script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> <div id="chart"></div>

Se puede agregar contenido adicional o datos no numéricos en la información de herramientas del gráfico.

Esto se basa en @supita''s excelente respuesta de @supita''s http://.com/a/25750639/1003746 .

Es posible insertar metadatos adicionales sobre cada línea en el parámetro de clases al generar / actualizar el gráfico. Estos se pueden agregar como filas a la información sobre herramientas.

Esto no parece afectar el gráfico, a menos que esté usando la función data.classes.

data: { classes: { data1: [{prop1: 10, prop2: 20}, {prop1: 30, prop2: 40}], data2: [{prop1: 50, prop2: 60}''{prop1: 70, prop2: 80}] } }

Para recoger los metadatos en la configuración.

tooltip: { contents: function (d, defaultTitleFormat, defaultValueFormat, color) { const $$ = this; const config = $$.config; const meta = config.data_classes; ... for (i = 0; i < d.length; i++) { if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; } if (! text) { ... } const line = d[0].id; const properties = meta.classes[line]; const property = properties? properties[i] : null;

Luego agregue las siguientes filas a la tabla para mostrar las nuevas propiedades.

if (property ) { text += "<tr class=''" + $$.CLASS.tooltipName + "-" + d[i].id + "''>"; text += "<td class=''name''><span style=''background-color:" + bgcolor + "''></span>PROP1</td>"; text += "<td class=''name''><span style=''background-color:" + bgcolor + "''></span>" + property.prop1 + "</td>"; text += "</tr>"; text += "<tr class=''" + $$.CLASS.tooltipName + "-" + d[i].id + "''>"; text += "<td class=''name''><span style=''background-color:" + bgcolor + "''></span>PROP2</td>"; text += "<td class=''name''><span style=''background-color:" + bgcolor + "''></span>" + property.prop2+ " cm/s</td>";

Si a alguien le importa, aquí hay una versión ClojureScript del algoritmo anterior (por ejemplo, la respuesta de Supita ), ligeramente simplificada (sin soporte para la configuración). (Probablemente, esto no es nada que pidieron los OP, pero a partir de ahora hay tan pocos recursos en la red sobre este tema que la mayoría de la gente podría terminar aquí).

:tooltip { :contents (fn [d default-title-format default-value-format color] (this-as this (let [this-CLASS (js->clj (.-CLASS this) :keywordize-keys true) tooltip-name-class (:tooltipName this-CLASS) rows (js->clj d :keywordize-keys true) title-row (->> (first rows) (#(str "<table class=''" (:tooltip this-CLASS) "''><tr><th colspan=''2''>" (default-title-format (:x %)) "</th></tr>"))) data-rows (->> rows (map #(str "<tr class=''" tooltip-name-class "--" (:id %) "''>" "<td class=''name''><span style=''background-color:" (color (:id %)) "''></span>" (:name %) "</td>" "<td class=''value''>" (default-value-format (:value %)) "</td>" "</tr>")))] (str title-row (string/join data-rows) "</table>"))))}

Si desea controlar la representación de información sobre herramientas y usar la representación por defecto según el valor de los datos, puede usar algo como esto:

tooltip: { contents: function (d, defaultTitleFormat, defaultValueFormat, color) { if (d[1].value > 0) { // Use default rendering return this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color); } else { return ''<div>Show what you want</div>''; } }, format: { /**/ } }

Si usa la función getTooltipContent de https://github.com/masayuki0812/c3/blob/master/src/tooltip.js#L27 y la agrega en la declaración del gráfico, en tooltip.contents, tendrá la misma información sobre herramientas Contenido que el predeterminado.

Puedes hacer cambios en este código y personalizarlo como quieras. Un detalle, ya que CLASS no está definido en el alcance actual, pero es un objeto de gráfico de partes, sustituí CLASS por $$.CLASS , tal vez ni siquiera necesite este Objeto en su código.