Question

目前我有一个包含2列的折线图。我总是会展示标签，因为我希望它能够立即显示标签。

问题是，当第1列的值与2dn列的值匹配时，标签会重叠。

有没有办法显示第1列的标签总是超过第一行并显示第2列的标签总是低于第二行？

这就是我现在所得到的：

var chart1 = c3.generate({ //large devices
    bindto: '#chart',
    data: {
        columns: [
            ['Col1', -0.7, -0.1, 4.6, -2.0, 4.2, 4.3, 5.4, 5.0, 0.6, 4.2, 4.9, 2.8, 2.7],
            ['Col2', -1.5, -0.9, 4.0, -2.5, 3.7, 4.0, 5.1, 4.8, 0.6, 4.2, 4.9, 2.8, 2.7]
        ],
        labels:{
            format: function(value){
                return value + '%'
            }
        }
    },
    axis: {
        x: {
            type: 'category',
            categories: ['Feb-17', 'Mar-17', 'Apr-17', 'May-17', 'Jun-17', 'Jul-17', 'Aug-17', 'Sep-17', 'Oct-17', 'Nov-17', 'Dec-17', 'Jan-18', 'Feb-18']
        },
        y: {
            show: false,
            min: -8,
            max: 8
        },
    },
    grid: {
        y: {
            lines: [{
                value: 0
            }]
        }
    },
    size: {
        height: 240
    }
});

我试图在onredered方法上设置Y位置，但标签没有a prop。另外，我不能得到点位置，所以我不知道当前的Y位置高于或低于该线。

Answer 1

您可以设置y轴标签并通过此选项更改其位置

y: {
label: {
  text: 'Your Y Axis',
  position: 'outer-middle'
}}

查看官方文档以获取更多信息：http://c3js.org/reference.html#axis-y-label

在C3图表上设置标签Y位置

1 个答案: