Chartist.js使用

案例1

参考
代码如下

 <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth" style="width: 400px;height: 350px;"></div>
    <script>
        var data = {
        // A labels array that can contain any sort of values
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        // Our series array that contains series objects or in this case series data arrays
        series: [
            [5, 2, 4, 2, 0]
        ]
        };
 
        // Create a new line chart object where as first parameter we pass in a selector
        // that is resolving to our chart container element. The Second parameter
        // is the actual data object.
        new Chartist.Line('.ct-chart', data);
    </script>
  </body>
</html>

效果图

案例2

代码如下

 <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./chartist.min.css">
    <script src="./chartist.min.js"></script>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth" style="width: 500px;height: 350px;"></div>
    <script>
        new Chartist.Line('.ct-chart', {
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            series: [
                [12, 9, 7, 8, 5],
                [2, 1, 3.5, 7, 3],
                [1, 3, 4, 5, 6]
            ]
        }, {
            fullWidth: true,
            chartPadding: {
                right: 40
            }
        });
    </script>
  </body>
</html>

效果图

posted @ 2024-02-07 20:56 DogLeftover 阅读(46) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· Chartist.js饼图

· Chartist.js条形图(二)

· echarts图表示例

· 学习进度笔记（二十四）

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

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

Chartist.js使用

案例1

案例2

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
	<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
	</head>
	<body>
	<div class="ct-chart ct-perfect-fourth" style="width: 400px;height: 350px;"></div>
	<script>
	var data = {
	// A labels array that can contain any sort of values
	labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
	// Our series array that contains series objects or in this case series data arrays
	series: [
	[5, 2, 4, 2, 0]
	]
	};

	// Create a new line chart object where as first parameter we pass in a selector
	// that is resolving to our chart container element. The Second parameter
	// is the actual data object.
	new Chartist.Line('.ct-chart', data);
	</script>
	</body>
	</html>