如何在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%;
}