C3.js 中的行超出图表区域

Question

我在 C3.js 图表库中遇到了一个错误。当您查看图像时，您可以看到折线图超出了 "chart-area"，并且在某些峰值情况下不可见。我会省略标签不可见的地方，但我很高兴看到没有隐藏部分的线。

这是重现错误的配置：

const config = {
        x: {
            tick: {
                rotate: -45,
                format: '%Y-%m-%d %H:%M:%S'
            },
            type: 'timeseries',
            height: 85,
            padding: {left: 30}
        },
        y: {
            label: {position: 'outer-middle', text: 'Event count'},
            min: 0,
            padding: {top: 0, bottom: 0}
        }
    },
    bindto: '#single-chart',
    color: {pattern: ['#323f71']},
    data: {
        x: 'x',
        xFormat: '%Y-%m-%d %H:%M:%S',
        labels: true,
        type: 'area-spline'
    },
    legend: {show: false},
    size: {height: 380},
    padding: {
        right: 50,
        left: 80
    },
    grid: {
        y: {
            show: true
        }
    }
};

现在有人知道如何解决这个问题吗？

Answer 1

我认为答案与 axis.y.padding.top = 0 设置有关。但是，我的示例看起来与您的略有不同，因为我从未丢失过线图。我可以复制你的唯一方法是设置 axis.y.max=1400，然后切掉情节的顶部。如果没有，那么请取消隐藏 y 轴线和 post 另一张图片，因为它有助于查看轴顶部是否有行终止符刻度。

请参阅下面的工作代码段，该代码段以您的代码和案例为模型，但与稍微重写的代码并不完全相同。该按钮在 y.top 填充 20 和零之间切换以说明效果。您可以看到最高绘图点标签被上限截断了。您可能想尝试完全删除该设置。

// Cannot find a usable method for changing axis.y.padding.top so redrawing the chart to show effect.

function resetIncPadding(yPaddingTop){
  
var chart = c3.generate(
{
    bindto: '#chart',
    size: {
      width: 600,
      height: 200
    },
    data: {
        x: 'x',
       // xFormat: '%Y-%m-%d %H:%M:%S',
        labels: true,
        type: 'area-spline',
        columns: [
          ['x', 
                  '2018-01-01','2018-01-02','2018-01-03','2018-01-04','2018-01-05','2018-01-06','2018-01-07','2018-01-08','2018-01-09','2018-01-10','2018-01-11','2018-01-12','2018-01-13','2018-01-14','2018-01-15','2018-01-16','2018-01-17','2018-01-18','2018-01-19','2018-01-20','2018-01-21','2018-01-22','2018-01-23','2018-01-24','2018-01-25','2018-01-26','2018-01-27','2018-01-28','2018-01-29','2018-01-30','2018-01-31'
           ],
        ['y',   5,10,15,10,10,10,10,5,30,90,500,1000,1200,1500,1230,1110,620,80,30,10,5,15,5,5,15,5,15,12,15,10,10
        ]
          ]
      },
      color: {pattern: ['#323f71']},
      axis: {
            x: {
                type: 'timeseries',
                tick: {
                    rotate: -45,
                    format: '%Y-%m-%d %H:%M:%S'
                },
                height: 85,
                padding: {left: 30}
            },
        y: {
                label: {position: 'outer-middle', text: 'Event count'},
                min: 0,
                padding: {top: yPaddingTop, bottom: 0}
            }
        },
        legend: {show: false},
        padding: {
            right: 50,
            left: 80
        },
        grid: {
            y: {
                show: true
            }
        }   
    });
}

// this is all about toggling the padding.
$('#toggle').on('click', function(e){

val = $(this).val();
val = (parseInt(val,10) === 20 ? 0 : 20);
  $(this).val(val).html(val)
  resetIncPadding(val);
  console.log(val)
})

// first draw on startup
resetIncPadding(20);

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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.6.7/c3.min.js"></script>

<p>Using axis.y.padding.top = <button id='toggle' value='20'>20</button></p>

<div class='chart-wrapper'>
<div class='chat' id="chart"></div>
</div>

C3.js 中的行超出图表区域

Line in C3.js goes out of the chart area

javascript

c3.js