使用jQuery Flot Chart

时间:2016-06-07 13:46:29

标签: jquery flot

我目前有一个简单的折线图。尝试使用CurvedLines插件平滑曲线,但这些点不会变圆。

我的代码在这里:

var d = [[2010, ], [2011, 0], [2012, 1000], [2013, 835000], [2014, 5100000], [2015, 15300000], [2016, 33400000], [2017, ]];


    var data1 = [{data: d, color: "#0086e5", points: { symbol: "circle", fillColor: "#ffffff", radius: 5 }, lines: {show: true}, points: {show: true}, curvedLines: {apply: true, monotonicFit: true}}];

    var options = {
             series: {
                 curvedLines: {active: true}                    
             }
          };

          /*series: {
            lines: { show: true },
            points: { show: true },
            curvedLines: {active: true}         
        },*/

    $.plot("#homechart",data1, {            

        xaxis: {
          tickColor: '#def2ff',
          tickDecimals: 0

        },

        yaxis: {
          tickLength: 0,
          show: false
        },
        grid: {
            backgroundColor: { colors: [ "#effaff", "#d7f3ff" ] },
            borderWidth: 0
        }

        });

        var ticklabel = $('.tickLabel');
        ticklabel.each(function(index, domElement) {
        var $element = $(domElement);

        if ($element.text() === "2010") {
            $element.hide();
        }

        if ($element.text() === "2017") {
            $element.hide();
        }
}, options);

生成图表但没有圆弧曲线。Flot Chart

1 个答案:

答案 0 :(得分:2)

情节调用的选项缺少

series: {
    curvedLines: {active: true}                    
}

(和xaxis的min / max-value)。

添加后,它可以运行:https://jsfiddle.net/khwc415t/