数据图表
线图
一个有三个系列的简单线图的例子。您可以实时编辑此示例。
<!-- 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>