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>
        new Chartist.Bar('.ct-chart', {
        labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
        series: [
            [5, 4, 3, 7],
            [3, 2, 9, 5],
            [1, 5, 8, 4],
            [2, 3, 4, 6],
            [4, 1, 2, 1]
        ]
        }, {
        // Default mobile configuration
        stackBars: true,
        axisX: {
            labelInterpolationFnc: function(value) {
            return value.split(/\s+/).map(function(word) {
                return word[0];
            }).join('');
            }
        },
        axisY: {
            offset: 20
        }
        }, [
        // Options override for media > 400px
        ['screen and (min-width: 400px)', {
            reverseData: true,
            horizontalBars: true,
            axisX: {
            labelInterpolationFnc: Chartist.noop
            },
            axisY: {
            offset: 60
            }
        }],
        // Options override for media > 800px
        ['screen and (min-width: 800px)', {
            stackBars: false,
            seriesBarDistance: 10
        }],
        // Options override for media > 1000px
        ['screen and (min-width: 1000px)', {
            reverseData: false,
            horizontalBars: false,
            seriesBarDistance: 15
        }]
        ]);
    </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>
        new Chartist.Bar('.ct-chart', {
        labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
        series: [20, 60, 120, 200, 180, 20, 10]
        }, {
        distributeSeries: true
        });
 
    </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>
        new Chartist.Bar('.ct-chart', {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [
            [5, 4, 3, 7, 5, 10, 3],
            [3, 2, 9, 5, 4, 6, 4]
        ]
        }, {
        axisX: {
            // On the x-axis start means top and end means bottom
            position: 'start'
        },
        axisY: {
            // On the y-axis start means left and end means right
            position: 'end'
        }
        });
 
    </script>
  </body>
</html>

效果图

点击查看详情

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

刷新页面返回顶部

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

相关博文：

· Chartist.js条形图(二)

· Chartist.js条形图

· Chart.js (v2.9.4)概要介绍

· Chart.js（未完）

· echart 图表使用

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

历史上的今天：
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>
	new Chartist.Bar('.ct-chart', {
	labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
	series: [
	[5, 4, 3, 7],
	[3, 2, 9, 5],
	[1, 5, 8, 4],
	[2, 3, 4, 6],
	[4, 1, 2, 1]
	]
	}, {
	// Default mobile configuration
	stackBars: true,
	axisX: {
	labelInterpolationFnc: function(value) {
	return value.split(/\s+/).map(function(word) {
	return word[0];
	}).join('');
	}
	},
	axisY: {
	offset: 20
	}
	}, [
	// Options override for media > 400px
	['screen and (min-width: 400px)', {
	reverseData: true,
	horizontalBars: true,
	axisX: {
	labelInterpolationFnc: Chartist.noop
	},
	axisY: {
	offset: 60
	}
	}],
	// Options override for media > 800px
	['screen and (min-width: 800px)', {
	stackBars: false,
	seriesBarDistance: 10
	}],
	// Options override for media > 1000px
	['screen and (min-width: 1000px)', {
	reverseData: false,
	horizontalBars: false,
	seriesBarDistance: 15
	}]
	]);
	</script>
	</body>
	</html>