c3.js图库中如何给图例名（图名）加上标

Question

我正在使用 c3.js 图形库来绘制图形。我需要在图表名称/图表图例中添加上标。

我尝试添加 HTML 标签

Test<sub>abc</sub>

这是字符串而不是标签。标签未呈现。

在下面的代码中，我需要将 data1 更改为 Data1⁴

我可能需要输入不同的字符而不是“4”

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 100],
            ['data2', 300],
            ['data3', 200]
        ],
        type: 'pie'
    },
    legend: {
        show: false
    }
});```



In the above code I need to change data1 as Data1⁴

Instead of "4" i may need to input different characters

There should be a simple fix for this , but I am  not able to find the solution. Since I will be getting dynamic characters I cannot copy the utf8 superscript characters.

Any help would be greatly appreciated.Thanks in advance.

Answer 1

有一种方法可以创建您自己的传奇。这是超级快速和完全可定制的。

基本上，为具有所需数据的第一次渲染添加图例。请检查此 Fiddle 以获取工作示例。

onrendered: function() {
  let chartData = this;
  if(!d3.select('.chart-legend').node()) {
    const legend = d3.select('#chart').insert('div', '.chart').attr('class', 'chart-legend');

    legend.selectAll('span')
    .data(['revenue', 'revenue1'])
    .enter().append('span')
    .attr('data-id', function (id) { return id; })
    .attr('class', 'legend-item')
    .html(function (id) { return "<span class=\"legend-label\">"+id+"<span><sup>45</sup>"; })
    .each(function (id) {
      d3.select(this).style('background-color', chartData.api.color(id));
    })
    .on('mouseover', function (id) {
      chartData.api.focus(id);
    })
    .on('mouseout', function (id) {
      chartData.api.revert();
    })
    .on('click', function (id) {
      d3.select(this).classed("c3-legend-item-hidden", function() { return !this.classList.contains("c3-legend-item-hidden"); });
      chartData.api.toggle(id);
    });
  }
}


// CSS
.legend-item {
  display: inline-block;
  width: 20%;
  position: relative;
  text-align: center;
  cursor: pointer;
  color: white;
  height: 7px;
  margin: 0 5px;
}

.legend-label {
  color: black;
  position: absolute;
  top: 7px;
  left: 20%;
}

c3.js图库中如何给图例名（图名）加上标

How to add superscript to the legend name (graph name) in c3.js graph library

d3.js

c3.js