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

d3.js c3.js

Question

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

var chart = c3.generate({
data: {
    columns: [
        [''data1'', 30000, 20000, 10000, 40000, 15000, 250000],
        [''data2'', 100, 200, 100, 40, 150, 250]
    ],
    axes: {
        data2: ''y2''
    }
},
axis : {
    y : {
        tick: {
            format: d3.format("s")
        }
    },
    y2: {
        show: true,
        tick: {
            format: d3.format("$")
        }
    }
},
tooltip: {
    format: {
        title: function (d) { return ''Data '' + d; },
        value: function (value, ratio, id) {
            var format = id === ''data1'' ? d3.format('','') : d3.format(''$'');
            return format(value);
        }
           //value: d3.format('','') // apply this format to both y and y2
    }
}
});

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.

Answer 1

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

var chart = c3.generate({
            /*...*/
            tooltip: {
                format: {
                    /*...*/
                },
                contents: function (d, defaultTitleFormat, defaultValueFormat, color) {

                    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);// sum func
                    totals_object.name = ''total'';//total will be shown in tooltip
                    totals_object.index = d[0][''index''];
                    totals_object.id = ''total'';//c3 will use this
                    d.push(totals_object);

                    var $$ = this,
                        config = $$.config,
                        titleFormat = config.tooltip_format_title || defaultTitleFormat,
                        nameFormat = config.tooltip_format_name || function (name) {
                            return name;
                        },
                        valueFormat = config.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>";
                }
            }

Answer 2

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

function toDate(dateStr)
{
    var numbers = dateStr.match(//d+/g);
    return new Date(numbers[0], numbers[1]-1, numbers[2]);
}
function GetMonthFromString(month)
{
    var months = {''Jan'' : ''01'',''Feb'' : ''02'',''Mar'':''03'',''Apr'':''04'',
    ''May'':''05'',''Jun'':''06'',''Jul'':''07'',''Aug'':''08'',''Sep'':''09'',
    ''Oct'':''10'',''Nov'':''11'',''Dec'':''12''};
    return months[month];
}
function GetFullDayName(formatteddate)
{
    var weekday = new Array(7);
    weekday[0] = "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";
    var dayofdate = weekday[formatteddate.getDay()];
    return dayofdate;
}

//Chart Data for x-axis, OnHours and AvgHours
function CollectChartData()
{
    var xData = new Array();
    var onHoursData = new Array();
    var averageHoursData = new Array();
    var instanceOccuringDatesArray =  ["2017-04-20","2017-04-21","2017-04-22","2017-04-23","2017-04-24","2017-04-25","2017-04-26","2017-04-27","2017-04-28","2017-04-29","2017-04-30","2017-05-01","2017-05-02","2017-05-03","2017-05-04","2017-05-05","2017-05-06","2017-05-07","2017-05-08","2017-05-09","2017-05-10","2017-05-11","2017-05-12","2017-05-13","2017-05-14","2017-05-15","2017-05-16","2017-05-17","2017-05-18","2017-05-19","2017-05-20"];
        var engineOnHoursArray =  ["4.01","14.38","0.10","0.12","0.01","0.24","0.03","6.56","0.15","0.00","1.15","0.00","1.21","2.06","8.55","1.41","0.03","1.42","0.00","3.35","0.02","3.44","0.05","5.41","4.06","0.02","0.04","7.26","1.02","5.09","0.00"];
        var avgUtilizationArray =  ["2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29"];
        xData.push(''x'');
        onHoursData.push(''OnHours'');
        averageHoursData.push(''Project Average'');
        for(var index=0;index<instanceOccuringDatesArray.length;index++)
        {
            xData.push(instanceOccuringDatesArray[index]);
        }
        for(var index=0;index<engineOnHoursArray.length;index++)
        {
            onHoursData.push(engineOnHoursArray[index]);
        }
        for(var index=0;index<avgUtilizationArray.length;index++)
        {
            averageHoursData.push(avgUtilizationArray[index]);
        }
        var Data = [xData, onHoursData, averageHoursData];
        return Data;
    }


function tooltip_contents(d, defaultTitleFormat, defaultValueFormat, color) {
    var $$ = this, config = $$.config, CLASS = $$.CLASS,
        titleFormat = config.tooltip_format_title || defaultTitleFormat,
        nameFormat = config.tooltip_format_name || function (name) { return name; },
        valueFormat = config.tooltip_format_value || defaultValueFormat,
        text, i, title, value, name, bgcolor;

    // You can access all of data like this:
    //$$.data.targets;

    for (i = 0; i < d.length; i++) {
        if (! text) {
                title = titleFormat ? titleFormat(d[i].x) : d[i].x;
                var arr = title.split(" ");                
                var datestr = new Date().getFullYear().toString() + "-"+ GetMonthFromString(arr[1]) + "-"+ arr[0];                  
               var formatteddate = toDate(datestr);                   
               var dayname = GetFullDayName(formatteddate);
               title = title + " (" + dayname + ")";
                text = "<table class=''" + $$.CLASS.tooltip + "''>" + (title || title === 0 ? "<tr><th colspan=''2''>" + title + "</th></tr>" : "");
            }

        name = nameFormat(d[i].name);
        var initialvalue = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
        if (initialvalue.toString().indexOf(''.'') > -1)
        {
            var arrval = initialvalue.toString().split(".");
            value = arrval[0] + "h " + arrval[1] + "m";
        }
        else
        {
            value = initialvalue + "h " + "00m";
        }
        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>";   
}
$(document).ready(function () {
     var Data = CollectChartData();
    var chart = c3.generate({
        data: {
                x: ''x'',
                columns: Data
            },
            axis: {
                x: {
                    type: ''timeseries'',
                    tick: {
                        rotate: 75,
                        //format: ''%d-%m-%Y''
                        format: ''%d %b''
                    }
                },
                y : {
                    tick : {
                        format: function (y) {
                            if (y < 0) {
                            }
                            return y;
                        }
                    },
                    min : 0,
                    padding : {
                        bottom : 0
                    }
                }
            },
            tooltip: {
                contents: tooltip_contents
            }
    });
});

   <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>

Answer 3

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

Answer 4

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

Answer 5

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: {
        /**/
    }
}

Answer 6

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.

var chart = c3.generate({
  /*...*/
  tooltip: {
      format: {
        /*...*/
      },
      contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
          var $$ = this, config = $$.config,
              titleFormat = config.tooltip_format_title || defaultTitleFormat,
              nameFormat = config.tooltip_format_name || function (name) { return name; },
              valueFormat = config.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>";
      }
  }
});