Как изменить содержимое всплывающей подсказки в c3js

Я работаю над отображением временной шкалы, и у меня есть данные, которые я хочу показать во всплывающей подсказке. в настоящее время он показывает только значение в каждый момент времени. и я не могу найти способ изменить его. в приведенном ниже примере показано, как изменить формат значения, но не отображать значения

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

они взяты из http://c3js.org/samples/tooltip_format.html, они признают, что нет примера для редактирования контента, но я не смог найти что-либо в ссылке или форумах, но предложение изменить код ( это здесь: https://github.com/masayuki0812/c3/blob/master/c3.js в строке 300) и ниже:

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

кто-нибудь пытался это сделать? разработали некоторые функции для облегчения процесса? есть ли какие-либо советы о том, как это сделать правильно? Я не знаю, как изменить свой код так, чтобы я мог использовать больше данных или данных, отличных от значения d, которое получает функция.

Ответы

Ответ 1

Если вы используете функцию getTooltipContent из https://github.com/masayuki0812/c3/blob/master/src/tooltip.js#L27 и добавьте ее в объявление диаграммы, в tooltip.contents, вы будете иметь то же самое содержимое всплывающей подсказки, которое было по умолчанию.

Вы можете вносить изменения в этот код и настраивать его по своему усмотрению. Одна деталь, так как CLASS не определена в текущей области, но это объект частичной диаграммы, я заменил CLASS на $$.CLASS, возможно, вам даже не нужен этот объект в вашем коде.

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

Ответ 2

Если вы хотите управлять визуализацией tooltip и использовать рендеринг по умолчанию в зависимости от значения данных, вы можете использовать что-то вроде этого:

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

Ответ 3

В моем случае мне пришлось добавить день для значения даты (ось х) в подсказке инструмента. Наконец я пришел придумал решение ниже

Ссылки для js и 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>

Ответ 4

Добавление дополнительного содержимого или не числовых данных в подсказки диаграммы можно сделать.

Это основано на @supita отличном ответе fooobar.com/questions/331690/....

Его можно вставить дополнительные метаданные о каждой строке в параметр классов при создании/обновлении диаграммы. Затем они могут быть добавлены в виде строк в всплывающую подсказку.

Это не влияет на график - если вы не используете функцию data.classes.

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

Чтобы получить метаданные в конфиге.

      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;

Затем добавьте следующие строки в таблицу, чтобы показать новые свойства.

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

Ответ 5

Если кто-то заботится, вот версия ClojureScript описанного выше алгоритма (например, supita answer), немного упрощенная (без поддержки конфигурации). (Наверное, этого не просил ОП, но на данный момент в этой сети так мало ресурсов, что большинство людей могут сюда попасть.)

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

Ответ 6

Когда у нас есть столбчатая диаграмма с накоплением, и мы хотим показать "Всего" во всплывающей подсказке (но не на графике в виде бара/стека), это может пригодиться.

Диаграммы C3 используют массив для хранения данных для всплывающих подсказок, и перед отображением всплывающих подсказок мы добавляем итоговые данные (или любые другие данные в соответствии с нашим требованием). Делая это, хотя итоги не доступны в виде стека, это показано во всплывающей подсказке.

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

Выше код был добавлен, чтобы убедиться, что общее количество доступно в

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