c3js›value 0在Y和Y2之间对齐

c3js › value 0 aligned between Y and Y2

本文关键字：Y2 之间 对齐 value c3js      更新时间：2023-09-26

如何将y0轴值对齐到y20轴值?

参见jsFiddle来理解

我尝试了选项center:0在斧头的，但我不希望0在图形的中心。

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 2000, 350, 300, -200, -50, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        types: {
            data1: 'line',
            data2: 'bar'
        },
        axes:{
            data1:'y',
          data2:'y2'
        }
    },
    axis: {
        y: {
            padding: {bottom: 0}
        },
         y2: {
                show:true,
            padding: {bottom: 0}
        },
        x: {
            min: 0,
            show: true
        }
    },
    grid: {
        x: {
            show: false
        },
        y: {
            show: false,
            lines: [
                {value: 0.0, text: 'i want 0 here ->', class:'red'}
            ]
        }
    }
});

官方文档。

谢谢。

通常情况下，您希望在0以上和0以下的坐标轴范围的比例相同，这就是min: -20适用于此特定示例的原因

在生成图表后，这通常会起作用:

var d1 = d3.extent(chart.data.values("data1"));
var d2 = d3.extent(chart.data.values("data2"));
if (d2[0] < 0 || d1[0] < 0) {
        var prop1 = d1[0] < 0 ? -(d1[1] / d1[0]) : Math.Infinity; 
    var prop2 = d2[0] < 0 ? -(d2[1] / d2[0]) : Math.Infinity;
    if (prop1 > prop2) {
        d1[0] = -(d1[1] / prop2);
    } else {
          d2[0] = -(d2[1] / prop1);
    }
    chart.axis.range({
            min: {y: d1[0], y2: d2[0]},
          max: {y: d1[1], y2: d2[1]}
    });
}

基本上，如果其中一个(或两个)系列具有负值，则它使用最小/最大轴设置将两个系列缩放为具有相同比例的正负范围。这意味着对于

， 0位于相同的垂直点。https://jsfiddle.net/ynz6quum/4/

相关文章：