Chartist.js条形图

双极条形图

代码案例

 <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./chartist.min.css">
    <script src="./chartist.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth" style="width: 500px;height: 350px;"></div>
    <script>
        var data = {
        labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
        series: [
            [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
        ]
        };
 
        var options = {
        high: 10,
        low: -10,
        axisX: {
            labelInterpolationFnc: function(value, index) {
            return index % 2 === 0 ? value : null;
            }
        }
        };
 
        new Chartist.Bar('.ct-chart', data, options);
    </script>
  </body>
</html>

效果图

点击查看详情

重叠条形图

代码案例

 <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./chartist.min.css">
    <script src="./chartist.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth" style="width: 500px;height: 350px;"></div>
    <script>
        var data = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        series: [
            [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
            [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
        ]
        };
 
        var options = {
        seriesBarDistance: 10
        };
 
        var responsiveOptions = [
        ['screen and (max-width: 640px)', {
            seriesBarDistance: 5,
            axisX: {
            labelInterpolationFnc: function (value) {
                return value[0];
            }
            }
        }]
        ];
 
        new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
 
    </script>
  </body>
</html>

效果图

点击查看详情

添加峰圈

代码案例

 <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./chartist.min.css">
    <script src="./chartist.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth" style="width: 500px;height: 350px;"></div>
    <script>
        // Create a simple bi-polar bar chart
        var chart = new Chartist.Bar('.ct-chart', {
        labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
        series: [
            [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
        ]
        }, {
        high: 10,
        low: -10,
        axisX: {
            labelInterpolationFnc: function(value, index) {
            return index % 2 === 0 ? value : null;
            }
        }
        });
 
        // Listen for draw events on the bar chart
        chart.on('draw', function(data) {
        // If this draw event is of type bar we can use the data to create additional content
        if(data.type === 'bar') {
            // We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value
            data.group.append(new Chartist.Svg('circle', {
            cx: data.x2,
            cy: data.y2,
            r: Math.abs(Chartist.getMultiValue(data.value)) * 2 + 5
            }, 'ct-slice-pie'));
        }
        });
 
    </script>
  </body>
</html>

效果图

点击查看详情

posted @ 2024-04-26 14:31 DogLeftover 阅读(24) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Chartist.js条形图(二)

· Chartist.js条形图(三)

· HTML5-图形和数据可视化秘籍-全-

· Chart.js（未完）

· echart 双坐标柱状图-折线图

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类

历史上的今天：
2022-04-26 Mybatis入门（五）：缓存
2022-04-26 Mybatis入门（四）：动态sql
2022-04-26 idea不能识别yaml文件
2022-04-26 docker容器通讯

Chartist.js条形图

双极条形图

重叠条形图

添加峰圈

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="./chartist.min.css">
	<script src="./chartist.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
	</head>
	<body>
	<div class="ct-chart ct-perfect-fourth" style="width: 500px;height: 350px;"></div>
	<script>
	var data = {
	labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
	series: [
	[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
	]
	};

	var options = {
	high: 10,
	low: -10,
	axisX: {
	labelInterpolationFnc: function(value, index) {
	return index % 2 === 0 ? value : null;
	}
	}
	};

	new Chartist.Bar('.ct-chart', data, options);
	</script>
	</body>
	</html>