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>

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

希望这有帮助。