javascript - C3js堆叠条形图，每个条形部分有多个数据

Question

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

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

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

Answer 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 链接 https://codepen.io/georgebuzoianu/pen/djoMKR

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