C3js堆积条形图，每个条形部分有多条数据答案

【问题标题】：C3js stacked bar chart with multiple pieces of data for each bar sectionC3js堆积条形图，每个条形部分有多条数据
【发布时间】：2018-07-11 15:22:18
【问题描述】：

我正在尝试创建一个堆叠条形图，其中组中的每个条形部分将有两条数据，一个计数和一个成本。我希望将计数反映在条形中，并且希望将成本显示在条形标签中。

我还希望能够在工具提示中同时显示计数和成本。

这可能吗？最简单的方法是什么？

【问题讨论】：

为了确保我理解，您只想将计数显示为条形图，对吗？
是的，条形段的长度应基于计数。标签应显示成本。我已经这样做了，因为我通过将成本信息保存在外部变量中并在标签格式函数中引用它并编辑工具提示的 HTML 来发布此内容。但是有没有更简单的内置方式？

标签： javascript bar-chart c3.js stacked-chart

【解决方案1】：

这可能是你想要的：

var matrix = [
  {//cat1 - position 0
    Low: {  cost: 10, count: 2},
    Medium: {  cost: 100, count: 20},
     High: {  cost: 1000, count: 40}
  },
  {//cat2 - position 1
    Low: {  cost: 20, count: 4},
    Medium: {  cost: 200, count: 40},
     High: {  cost: 2000, count: 60}
  },
   {//cat3 - position 2
    Low: {  cost: 30, count: 6},
    Medium: {  cost: 300, count: 60},
     High: {  cost: 3000, count: 80}
  }];
//countsData can be build using matrix
var countsData = [
            ['Low', 2, 4, 6],
            ['Medium', 20, 40, 60],
            ['High', 40, 60, 80],
        ];

var riskToColor = {
            Low: '#9ACD32',
            Medium: '#FFD700',
            High: '#FF4500'
        };
var categoriesList = ['cat1', 'cat2', 'cat3'];

var chart = c3.generate({
  bindto: '#cool-chart',
  size: {
    height: 200
    },
    data: {
        columns: countsData,
        type: 'bar',
        colors: riskToColor,
        groups: [
            ['Low', 'Medium', 'High']
        ],
       order: null,
       labels: {                       
         format: function (v, id, i, j) {
           if(i !== undefined) {
             // console.log(i+" " + matrix[i][id]['cost']); 
             return matrix[i][id]['cost'] + "$";
           } 
           else return v;
         }},
      },
      axis: {
         rotated: true,
         x: {
          type: 'category',
          categories: categoriesList
         },
        y: {show: false}
       },
      tooltip: {
        contents: function (d) {
          var $$ = this, config = $$.config,text;
          console.log(d[0]);
          text = "<table class='" + $$.CLASS.tooltip + "'><tr><th colspan='3'>"+categoriesList[d[0].index]+"</th></tr>"; 
          text += "<tr class='" + $$.CLASS.tooltipName + "'>";
          text += "<td class='name'>Risk</td>";
          text += "<td class='name'>Count</td>";
          text += "<td class='value'>Cost</td></tr>";
          for (i = 0; i < d.length; i++) {
            text += "<tr class='" + $$.CLASS.tooltipName + "'>";
            text += "<td class='name'><span style='background-color:"+riskToColor[d[i].name]+"'></span>"+d[i].name+"</td>";
            text += "<td class='value'>"+d[i].value+"</td>";
            text += "<td class='value'>"+matrix[d[i].x][d[i].name]['cost']+"$</td></tr>";
           }
          return text + "</table>";
        }
     }
});

Codepen linkhttps://codepen.io/georgebuzoianu/pen/djoMKR

您必须构建一个额外的结构来保存整个矩阵（类别-成本-计数）。使用该矩阵，您将能够为每个计数数据添加相应的成本标签。

【讨论】：

【解决方案2】：

我认为更好的解决方法是使用自定义 XY 条形图（请参阅 https://c3js.org/samples/axes_x_tick_format.html）。在这里，您将使用 c3.js 库直接使用您的数据集定义 X 轴。

例如，对于您的数据，您可以自定义自己的 X 轴，如下所示：

var chart = c3.generate({
    data: {
        x: 'cost',
        columns: [
            ['cost', 10, 20, 30, 40, 50, 60],
            ['count', 30, 200, 100, 400, 150, 250],
        ],
        type: 'bar',
    },
});

【讨论】：

我已经根据自己的数据定义了 x 轴，它是非数字数据（axis.x.type='category'）。数量和成本都在这之下。堆栈中的不同块是另一条信息。像这样：imgur.com/CNjVFJg
嗯，好的。你没有提到你已经使用了类别，所以我提出了最轻和最简单的。而且我认为您找到了最简单的方法，因为该库并不真正支持这一点:-)