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

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
                },
            });

此代码将显示下一张图表

如何在绿色/橙色/红色栏中添加标签（例如Alpha，Bravo ...），而不是将其放在图表底部？

Answer 1

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

1. 您应该能够创建一个自定义图例，如此处所述：https://c3js.org/samples/legend_custom.html，然后使用translation / transform和D3js将这些标签移到相应的栏中。

2. 您可以尝试使用D3移动现有标签并进行翻译/转换。