Общее количество в заголовке всплывающей подсказки c3js

У меня есть следующий код в c3.js для создания гистограммы с накоплением.

    x=['a','b','c'];
    var chart = c3.generate({
    data: {

    columns: [
        ['data1', -30, 200, 200],
        ['data2', 130, 100, -100],

    ],
    type: 'bar',
    groups: [
        ['data1', 'data2']
    ]
    },

    });

Мне было интересно, как реализовать функцию, чтобы показать общее количество в заголовке всплывающей подсказки, которая была реализована здесь


stacked-chart bar-chart c3.js
person Appstarter    schedule 11.07.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Самый простой способ сделать это — написать собственную HTML-подсказку. Вы можете сделать это с помощью кода ниже.

var chart = c3.generate({
  .......
  tooltip: {
    contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
      return ...... Your HTML as a string here .......
    }
  }
});

Затем вам нужно будет суммировать значения всех точек, которые имеют тот же индекс, что и та, на которую вы навели указатель мыши, примерно так:

var sum = 0;
for (var i = 0; i < chart.data.targets.length; i++) {
  sum += chart.data.targets[i].values[d[0].index].value;
}

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

person krsmith88    schedule 11.07.2017