javascript - 带有重叠条的堆积条形图 C3js

Question

美好的一天。

我正在尝试使用如下所示的 C3.js 创建条形图:

我已经尝试过堆叠条形图，但问题是我无法让每个条形具有不同的宽度，而且我也无法让它们重叠(彼此重叠)。

对于像上图那样做有什么帮助吗？

谢谢

更新 1:

在尝试了几个想法之后，我最终得到了这个:

var chart = c3.generate({
data: {
    columns: [
      ['result1', null],
      ['result2', null],
      ['data1', -30],
      ['data2', -130],
      ['data3', -230],
      ['data4', -130],
      ['data5', -30],
      ['empty',''],
      ['data11', -30],
      ['data22', -130],
      ['data33', -230],
      ['data44', -130],
      ['data55', -30]
    ],

    type: 'bar',

    colors: {
      result1: '#c3c8d4',
      data1: '#c3c8d4',
      data2: '#c3c8d4',
      data3: '#c3c8d4',
      data4: '#c3c8d4',
      data5: '#c3c8d4',

      result2: '#3c9fbf',
      data11: '#3c9fbf',
      data22: '#3c9fbf',
      data33: '#3c9fbf',
      data44: '#3c9fbf',
      data55: '#3c9fbf',
    },
},
axis: {
    y: {
      tick: {
        format: function(d) {
          return (d >= 0) ? d : d * -1;
        }
      },
    }
},
bar: {
    width: {
      ratio: 0.1
    }
},
tooltip: {
    format: {
      value: function(value, ratio, id) {
        return;
      }
    }
}
});


d3.select('.c3-legend-item-result1').on('mouseover', function(id) {
    var tmparr = [];
    tmparr.push(id);
    for (var i = 0; i < 5; i++)
        tmparr.push('data' + (i + 1));
    chart.focus(tmparr);
  })
  .on('mouseout', function(id) {
    chart.revert();
  })
  .on('click', function(id) {
    var tmparr = [];
    for (var i = 0; i < 5; i++)
        tmparr.push('data' + (i + 1));
    chart.toggle(tmparr);
  });

d3.select('.c3-legend-item-result2').on('mouseover', function(id) {
    var tmparr = [];
    tmparr.push(id);
    for (var i = 0; i < 5; i++)
        tmparr.push('data' + (i + 1) + (i + 1));
    chart.focus(tmparr);
  })
  .on('mouseout', function(id) {
    chart.revert();
  })
  .on('click', function(id) {
    var tmparr = [];
    for (var i = 0; i < 5; i++)
        tmparr.push('data' + (i + 1) + (i + 1));
    chart.toggle(tmparr);
  });

JSFiddle:http://jsfiddle.net/h2ndL9cb/

但我觉得代码太多了，还有其他想法吗？

谢谢

Answer 1

您可以这样定义您的图表数据(见下文)。获得数据后，您可以转换和隐藏图例项。

可以合并转换后的数据，使用诸如 lodash 之类的库, 与 c3js 对象。

当然，这并不能完全解决您的问题，但这应该让您了解如何转换数据以获得所需的结果。

var chartData = {
  data : {
    result1: [-30, -130, -230, -130, -30],
    result2: [-30, -130, -230, -130, -30]
  },
  colors: {
    result1: '#c3c8d4',
    result2: '#3c9fbf'
  },
};

function transformData(data) {
  var data_columns = [];
  var data_colors = {};
  var legend_hide = ['empty'];
  var keys = Object.keys(data.data);

  for (var k = 0; k < keys.length; k++) {
    var key = keys[k];
    var values = data.data[key];

    data_columns.splice(k, 0, [key, null]);
    data_colors[key] = data.colors[key];

    for (var i = 0; i < values.length; i++) {
      var value_key = key + '_' + k + '_' + i

      data_columns.push([value_key, values[i]]);
      data_colors[value_key] = data.colors[key];
      legend_hide.push(value_key);
    }
    if (k < keys.length - 1) {
      data_columns.push(['empty', '']);
    }
  }

  return {
    data : {
      columns : data_columns,
      colors : data_colors
    },
    legend : {
      hide : legend_hide
    }
  };
}

var chart = c3.generate(_.merge({
  data : {
    type : 'bar'
  },
  axis: {
    y: {
      tick: {
        format: function(d) {
          return (d >= 0) ? d : d * -1;
        }
      },
    }
  },
  bar: {
    width: {
      ratio: 0.1
    }
  },
  tooltip: {
    format: {
      value: function(value, ratio, id) {
        return;
      }
    }
  }
}, transformData(chartData))); // Transform and merge data...

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>

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