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>

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

希望对您有所帮助。

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

Chartist.js make fill area expand all the way to the right

javascript

chartist.js