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

在选项中，您可以传递 bezierCurve ，这样就不会获得平滑的曲线，

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

Answer 3

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

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

Chartist JS，线图在X轴下

3 个答案: