如何在条形图中创建标签？

Question

我正在检查网站以验证用户网站的一些信息。我有一个使用以下代码配置的 C3JS 图表：

window.onload = function () {
            var debug = {{ env('APP_DEBUG') }}
            console.log('Debug: ' + debug);

            var chart = c3.generate({
                data: {
                    columns: [
                        ['alpha', 100],
                        ['bravo', 100],
                        ['charlie', 50],
                        ['delta', 1],
                    ],
                    colors: {
                        'alpha': '#3FB34F',
                        'bravo': '#3FB34F',
                        'charlie': '#E8B30C',
                        'delta': '#EB370F',
                    },
                    type: 'bar',
                    labels: true,
                },
                bar: {
                    space: 0.05
                },
                axis: {
                    rotated: true
                },
            });

此代码生成下一个图表

如何在 green/orange/red 栏中添加标签（如 alpha、bravo...）而不是将它们放在图表底部？

Answer 1

我还没有准备好解决方案，但我可以想到两种可能的解决方案。

您应该能够创建自定义图例，如下所述：https://c3js.org/samples/legend_custom.html，然后使用 translate/transform 和 D3js 将这些标签移动到相应的条形图。
您可以尝试使用 D3 和 translate/transform 移动现有标签。

如何在条形图中创建标签？

How can I create a label in the bar chart?

javascript

charts

c3.js