【问题标题】:Change tooltip width ratio in C3 if Bar width ratio is set如果设置了条形宽度比率,则更改 C3 中的工具提示宽度比率
【发布时间】:2020-05-10 17:39:21
【问题描述】:

在 C3 条形图中,当我们将 Width Ratio 设置为小于 1 时,条形会被挤压,但工具提示区域不会。我们如何将工具提示设置为仅显示在条上而不是在整个区域上,如下例所示。

var chart = c3.generate({
    data: {
        columns: [
            ['data1', -30, 200, 200, 400, -150, 250],
            ['data2', 130, 100, -100, 200, -150, 50],
            ['data3', -230, 200, 200, -300, 250, 250]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2']
        ]
    },bar: {
        width: { ratio: 0.5 }
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});

setTimeout(function () {
    chart.groups([['data1', 'data2', 'data3']])
}, 1000);

setTimeout(function () {
    chart.load({
        columns: [['data4', 100, -50, 150, 200, -300, -100]]
    });
}, 1500);

setTimeout(function () {
    chart.groups([['data1', 'data2', 'data3', 'data4']])
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.12/c3.js"></script>

<div id="chart"></div>

【问题讨论】:

  • 我是 C3 新手,使用的是 0.4.8 版本

标签: javascript d3.js c3.js


【解决方案1】:

您是否检查过 tooltip 属性? https://c3js.org/reference.html#tooltip-contents

【讨论】:

  • 是的,我已阅读文档。但是找不到解决办法
猜你喜欢
  • 2017-02-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-06-17
  • 2014-09-23
  • 1970-01-01
相关资源
最近更新 更多