X 轴上显示的 C3JS 访问值

Question

我有这样的简单条形图：

这是我的 C3JS

var chart = c3.generate({
data: {
json:[{"A": 67, "B": 10, "site": "Google", "C": 12}, {"A": 10, "B": 20, "site": "Amazon", "C": 12}, {"A": 25, "B": 10, "site": "Whosebug", "C": 8}, {"A": 20, "B": 22, "site": "Yahoo", "C": 12}, {"A": 76, "B": 30, "site": "eBay", "C": 9}],
        mimeType: 'json',
     keys: {
         x: 'site',
         value: ['A','B','C']
     },
     type: 'bar',
     selection: {
   enabled: true
     },
     onselected: function(d,element)
     {   
      alert('selected x: '+chart.selected()[0].x+' value: '+chart.selected()[0].value+' name: '+chart.selected()[0].name);
     },
     groups: [
         ['A','B','C']
     ]
 },
 axis: {
     x: {
 type: 'category'
        }
      }
});

选择（单击）某些图表元素后，警报会显示第一个所选元素的 X 以及值和名称属性。例如 "selected x: 0 value: 67 name: A" 在我点击左上图表元素之后。如何获得 X 轴上显示的值？在本例中为 "Google"。

Answer 1

属性类别在 x-axis 声明为类别类型时填充，如本例所示。因此，要从 x-axis 中获取数据，您需要调用 .categories() 函数。

onselected: function(d,element){alert(chart.categories()[d.index]);}

https://jsfiddle.net/4bos2qzx/1/

X 轴上显示的 C3JS 访问值

C3JS Acces value shown on X axis

data-visualization

c3.js