线图

一个有三个系列的简单线图的例子。您可以实时编辑此示例。

<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>

散射图

这个高级示例使用线图绘制散点图。数据对象使用函数样式随机机制创建。有一个移动第一响应配置,使用响应选项在小屏幕上显示更少的标签。

<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>

带面积的线图

该图表使用 showArea 选项绘制线条、点以及区域形状。使用低选项指定一个固定的下界,使区域扩展。您还可以使用 areaBase 属性指定用于确定区域形状基位置的数据值(默认为 0)。

<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>

双极条形图

范围限制设置的双极条形图,设置有低和高。还有一个插值函数,用于跳过每个奇数网格线/标签。

<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>

堆叠条形图

您还可以通过在配置中使用stackBars属性,将条形图设置为轻松地将系列条形图堆叠在一起。

<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>

水平柱状图

创建水平条形图非常简单。不需要学习新的图表类型,只需传递一个额外的选项就足够了。

<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>

仪表图

这个饼图使用 donut, startAngle and total来绘制。

<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>

圆环图

这个饼图使用donut 和 donutSolid来绘制圆环图。

<!-- page js -->
<script src="assets/vendors/chartist/chartist.min.js"></script>