javascript - Chartist JS，X 轴下的折线图

Question

目前我正在使用 Chartist JS jQuery 插件，我遇到了这个问题，其中一个函数低于 x 轴，即使它没有任何负点。

有没有办法避免这个问题，请检查图像以进一步了解。

编码

var options = {
    low: 0,
    fullWidth: true,
    height: '225px',
    chartPadding: {
        left: 0,
        right: 40,
    },
    showArea: true,
    onlyInteger:true,
    bezierCurve:false
};

$.ajax({
    url: $('.ct-log-lead').data('url'),
    method: 'GET',
    data: {customerId:$('.ct-log-lead').data('id'),phoneNumber: $('.ct-log-lead').data('phone')},
    success: function (d) {

        data = {
            labels: d[0],
            datasets: d[1]
        };                     

//        var leadsLastSevenDays = 0;
//        data.datasets[0].forEach(function (value) {
//            leadsLastSevenDays += value;
//        })        
//         $('.call-seven').html(d[2]);         

        var a = new Chartist.Line('.ct-log-lead', {
            labels: data.labels,
            series: [
                {
                    name: 'Form Leads',
                    data: data.datasets[0]
                },
                {
                    name: 'Call Logs',
                    data: data.datasets[1]
                }
            ],

        }, options);
    }
});

谢谢

Answer 1

我遇到了同样的问题，只需将其添加到您的选项变量中即可获取更多信息默认情况下，Chartist 使用基数样条算法来平滑线条。您可以轻松自定义它。

 lineSmooth: Chartist.Interpolation.simple({
    divisor: 2
  }),

看到两个小提琴 http://jsfiddle.net/Van_Jarvis/3uL7zu4o/113/

http://jsfiddle.net/3uL7zu4o/114/

Answer 2

标准线插值/平滑可能会导致不需要的伪影。使用简单插值作为替代：

http://gionkunz.github.io/chartist-js/examples.html#example-line-simple-smoothing

Answer 3

在选项中你可以通过bezierCurve这样你就不会得到平滑的曲线，

var options = {
     bezierCurve:false
  }
var myLineChart = new Chart(ctx).Line(data, options);