Chartist.js折线图(四)

线插值/平滑

代码如下

 <!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>
        var chart = new Chartist.Line('.ct-chart', {
        labels: [1, 2, 3, 4, 5],
        series: [
            [1, 5, 10, 0, 1],
            [10, 15, 0, 1, 2]
        ]
        }, {
        // Remove this configuration to see that chart rendered with cardinal spline interpolation
        // Sometimes, on large jumps in data values, it's better to use simple smoothing.
        lineSmooth: Chartist.Interpolation.simple({
            divisor: 2
        }),
        fullWidth: true,
        chartPadding: {
            right: 20
        },
        low: 0
        });
 
    </script>
  </body>
</html>

效果图

点击查看详情

系列覆盖

代码如下

 <!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>
        var chart = new Chartist.Line('.ct-chart', {
        labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
        // Naming the series with the series object array notation
        series: [{
            name: 'series-1',
            data: [5, 2, -4, 2, 0, -2, 5, -3]
        }, {
            name: 'series-2',
            data: [4, 3, 5, 3, 1, 3, 6, 4]
        }, {
            name: 'series-3',
            data: [2, 4, 3, 1, 4, 5, 3, 2]
        }]
        }, {
        fullWidth: true,
        // Within the series options you can use the series names
        // to specify configuration that will only be used for the
        // specific series.
        series: {
            'series-1': {
            lineSmooth: Chartist.Interpolation.step()
            },
            'series-2': {
            lineSmooth: Chartist.Interpolation.simple(),
            showArea: true
            },
            'series-3': {
            showPoint: false
            }
        }
        }, [
        // You can even use responsive configuration overrides to
        // customize your series configuration even further!
        ['screen and (max-width: 320px)', {
            series: {
            'series-1': {
                lineSmooth: Chartist.Interpolation.none()
            },
            'series-2': {
                lineSmooth: Chartist.Interpolation.none(),
                showArea: false
            },
            'series-3': {
                lineSmooth: Chartist.Interpolation.none(),
                showPoint: 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>
        // Requires Moment.js
 
        var chart = new Chartist.Line('.ct-chart', {
        series: [
            {
            name: 'series-1',
            data: [
                {x: new Date(143134652600), y: 53},
                {x: new Date(143234652600), y: 40},
                {x: new Date(143340052600), y: 45},
                {x: new Date(143366652600), y: 40},
                {x: new Date(143410652600), y: 20},
                {x: new Date(143508652600), y: 32},
                {x: new Date(143569652600), y: 18},
                {x: new Date(143579652600), y: 11}
            ]
            },
            {
            name: 'series-2',
            data: [
                {x: new Date(143134652600), y: 53},
                {x: new Date(143234652600), y: 35},
                {x: new Date(143334652600), y: 30},
                {x: new Date(143384652600), y: 30},
                {x: new Date(143568652600), y: 10}
            ]
            }
        ]
        }, {
        axisX: {
            type: Chartist.FixedScaleAxis,
            divisor: 5,
            labelInterpolationFnc: function(value) {
            return moment(value).format('MMM D');
            }
        }
        });
    </script>
  </body>
</html>

效果图

点击查看详情

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

刷新页面返回顶部

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

相关博文：

· Chartist.js折线图(二)

· Chartist.js折线图

· echarts 折线图横轴动态时间

· echarts折线组件

· Highcharts.line

阅读排行：
· 阿里巴巴 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>
	</head>
	<body>
	<div class="ct-chart ct-perfect-fourth" style="width: 500px;height: 350px;"></div>
	<script>
	var chart = new Chartist.Line('.ct-chart', {
	labels: [1, 2, 3, 4, 5],
	series: [
	[1, 5, 10, 0, 1],
	[10, 15, 0, 1, 2]
	]
	}, {
	// Remove this configuration to see that chart rendered with cardinal spline interpolation
	// Sometimes, on large jumps in data values, it's better to use simple smoothing.
	lineSmooth: Chartist.Interpolation.simple({
	divisor: 2
	}),
	fullWidth: true,
	chartPadding: {
	right: 20
	},
	low: 0
	});

	</script>
	</body>
	</html>