C3.js - сгруппированная гистограмма - могу ли я сделать значения, чтобы содержать вместо стека друг друга?

Question

Я использую библиотеку C3.js для создания штабелированной гистограммы (мой текущий код находится в jsfiddle внизу). Проблема в том, что по умолчанию столбцы ... сложенными. Поскольку мне нужно создавать столбцы с минимальными, средними и максимальными значениями, я бы хотел, чтобы значения скорее содержали друг друга, а не стек. Например. если у меня есть min = 10, средний = 50 и max = 100, я бы хотел, чтобы бар имел высоту 100, а не 160. Есть ли встроенный способ поддержки такого поведения?

Мой текущий код:

<div id="chart"></div> 

<script> 
    var chart = c3.generate({ 
     bindTo: '#chart', 
     data: { 
      columns: [ 
       ['min', 10, 25, 15], 
       ['avg', 50, 33, 51], 
       ['max', 100, 75, 200] 
      ], 
      type: 'bar', 
      groups: [ 
       ['min', 'avg', 'max'] 
      ] 
     } 
    }); 
</script> 

Вот jsfiddle с моим кодом: https://jsfiddle.net/gguej6n0/

Answer 1

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

На этот раз я воспользовался функцией err ... (ошибка?), найденной в c3, которая заставила другого пользователя непреднамеренно получить эффект, который Вы хотели.

c3.js generate a stacked bar from JSON payload

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

 [{ "x-axis": "0", 
      "min": 30 
     }, 
     { "x-axis": "0", 
      "max": 40 
     }], 

В то время, таким образом, будет складывать их:

 [{ "x-axis": "0", 
      "min": 30, 
      "max": 40 
     }], 

Так что нам нужно, это рутина, чтобы превратить исходные данные столбцов на основе в объект JSON, где каждый элемент данных будет поделен отдельно:

http://jsfiddle.net/gvn3y0q6/5/

var data = [ 
       ['min', 10, 25, 15, 12], 
       ['avg', 50, 33, 51, 24], 
       ['max', 100, 75, 200, 76] 
      ]; 

var json = []; 
data.forEach (function (datum) { 
    var series = datum[0]; 
    for (var i = 1; i < datum.length; i++) { 
    var jdatum = {"x-axis": i-1}; 
    jdatum[series] = datum[i]; 
    json.push (jdatum); 
    } 
}); 

var chart = c3.generate({ 
    data: { 
     x: "x-axis", 
     json:json, 
     keys: { 
      x: "x-axis", 
      value: ["max", "avg", "min"] 
     }, 
     groups: [ 
      ['max', 'avg', 'min'] 
     ], 
     type: 'bar', 
    }, 
    bar: { 
     width: { 
      ratio: 0.95 
     } 
    }, 
    axis: { 
     x: { 
     padding: { 
      left: 0.5, 
      right: 0.5, 
     } 
     } 
    }, 
    tooltip: { 
     grouped: true, 
     contents: function (d, defaultTitleFormat, defaultValueFormat, color) { 
      var data = this.api.data.shown().map (function(series) { 
       var matchArr = series.values.filter (function (datum) { 
        return datum.value != undefined && datum.x === d[0].x; 
       }); 
       matchArr[0].name = series.id; 
       return matchArr[0]; 
      }); 

      return this.getTooltipContent(data, defaultTitleFormat, defaultValueFormat, color); 
     } 
    } 
    }); 

На этот раз скрытие серии не влияет на другие серии. Там по-прежнему нужна подсказка jiggery-pokery tooltip, хотя в противном случае мы получаем только одно значение, указанное во всплывающей подсказке, при зависании над одним из «стеков».Похоже, что данные содержат много пустых значений, что заставляет меня думать, что это какая-то ошибка, которую я использую здесь.

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

Answer 2

Я не знаю ни о чем встроенные, которые сделают бары сливаются друг с другом, как вы описать, но может ли помочь бок о бок? Если это так, удалите группировку.

См https://jsfiddle.net/gguej6n0/1/

var chart = c3.generate({ 
    bindTo: '#chart', 
    data: { 
     columns: [ 
      ['min', 10, 25, 15], 
      ['avg', 50, 33, 51], 
      ['max', 100, 75, 200] 
     ], 
     type: 'bar' 
    }, 
    bar: { 
      width: { 
       ratio: 0.3 
     } 
    } 
}); 

Answer 3

Я не думаю, что c3 имеет «overplot» запрещающую вариант, но вы можете массировать ваши данные ...

В основном обрабатывать данные заранее, чтобы максимально на самом деле не более - ср и ср фактически ср - мин

Затем процедура подсказки восстанавливает правильные суммы для показа пользователя

Просто ухода удобно, если вы передать данные на что-нибудь еще, и помните, что данные были изменены и восстановить его (или сохранить копию)

https://jsfiddle.net/gguej6n0/5/

var data = [ 
      ['min', 10, 25, 15], 
      ['avg', 50, 33, 51], 
      ['max', 100, 75, 200] 
     ]; 

    for (var n = data.length-1; n > 0; n--) { 
    for (var m = 1; m < data[n].length; m++) { 
    data[n][m] -= data[n-1][m]; 
    } 
} 


var chart = c3.generate({ 
     bindTo: '#chart', 
    data: { 
     columns: data, 
     type: 'bar', 
     groups: [ 
      ['min', 'avg', 'max'] 
     ] 
    }, 
    tooltip: { 
     contents: function (d, defaultTitleFormat, defaultValueFormat, color) { 
       var dc = d.map (function (dd) { 
        return {value: dd.value, x: dd.x, id: dd.id, name: dd.name, index: dd.index}; 
      }) 
       for (var n= 1; n < dc.length; n++) { 
        dc[n].value += dc[n-1].value; 
      } 
      return this.getTooltipContent(dc, defaultTitleFormat, defaultValueFormat, color); 
     } 
    } 
});