javascript - Chartist.js 使填充区域一直向右扩展

Question

我正在使用showArea: true但找不到合适的设置来完全填充。例子：

我认为这是因为在它结束之后我没有任何数据点，但我不希望绿线一直延伸到顶部。还有另一种方法可以做到这一点吗？

Answer 1

您showArea:true用于渲染该区域。但正如您所注意到的，showArea 填充仅与绘制的线关联的区域。

您正在寻找的是一个没有线的附加区域。

为了达到这种效果，您需要创建两条不同的行： 第一行将具有showArea: false并延伸到 W3，如您的示例所示。这将像您已经呈现的那样呈现浅绿色线。

第二行将是不可见的showLine: false，showArea: true并且一直延伸到顶部到 W8。

换句话说，你实际上是在寻找两种不同的东西。一个是线，一个是填充区域。

Answer 2

我想您问题的关键解决方案是使用 display:inline-block; 例如：

div.page {
color: white;
background: black;
margin: auto;
padding: 1em;
display:inline-block;
}

Answer 3

为了使该区域突出显示，您需要插入适当的数据。showArea 属性与其拥有的数据一样多。这是一个概念证明：

/* Add a basic data series with six labels and values */
var data = {
    labels: [1, 2, 3, 4, 5],
    series: [
        [1, 5, 10, 15, 20],
        [1, 20]
    ]
};

/* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */
var options = {
    showArea: true,
    axisX: {
        labelInterpolationFnc: function (value) {
            return 'Week ' + value;
        }
    }
};


/* Initialize the chart with the above settings */
new Chartist.Line('.ct-chart', data, options);

.ct-chart {
    width: 450px;
    height: 250px;
}

<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<div class="ct-chart ct-square"></div>

这两个区域在它们所代表的数据中突出显示。

希望这可以帮助。