Question

我正在C3.js图表库中遇到错误。当您查看图像时，可以看到折线图超出了“图表区域”，并且在某些峰值情况下不可见。我会忽略标签不可见的情况，但是很高兴看到没有隐藏部分的行。

以下是用于重现错误的配置：

car(['instr1.csv','instr2.csv'],['act1.csv','act2.csv'])

现在有人，如何解决此问题？

Answer 1

我认为答案与axis.y.padding.top = 0设置有关。但是，我的示例看上去与您的示例略有不同，因为我从不会丢失线条图。我可以复制您的唯一方法是设置axis.y.max = 1400，然后将图的顶部切掉。如果不是，那么请您取消隐藏y轴线并发布另一张图像，因为这对于查看线终止标记是否在轴的顶部很有用。

请参见下面的工作代码段，这些代码段是根据您的代码和案例编写的，但与稍微重写的代码段并不完全相同。该按钮在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中的线超出了图表区域

1 个答案: