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 times = function(n) {
        return Array.apply(null, new Array(n));
        };
 
        var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
        data.labels.push(index + 1);
        data.series.forEach(function(series) {
            series.push(Math.random() * 100)
        });
 
        return data;
        }, {
        labels: [],
        series: times(4).map(function() { return new Array() })
        });
 
        var options = {
        showLine: false,
        axisX: {
            labelInterpolationFnc: function(value, index) {
            return index % 13 === 0 ? 'W' + value : null;
            }
        }
        };
 
        var responsiveOptions = [
        ['screen and (min-width: 640px)', {
            axisX: {
            labelInterpolationFnc: function(value, index) {
                return index % 4 === 0 ? 'W' + value : null;
            }
            }
        }]
        ];
 
        new Chartist.Line('.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>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth" style="width: 500px;height: 350px;"></div>
    <script>
        new Chartist.Line('.ct-chart', {
            labels: [1, 2, 3, 4, 5, 6, 7, 8],
            series: [
                [5, 9, 7, 8, 5, 3, 5, 4]
            ]
        }, {
            low: 0,
            showArea: true
        });
    </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>
        new Chartist.Line('.ct-chart', {
        labels: [1, 2, 3, 4, 5, 6, 7, 8],
        series: [
            [1, 2, 3, 1, -2, 0, 1, 0],
            [-2, -1, -2, -1, -2.5, -1, -2, -1],
            [0, 0, 0, 1, 2, 2.5, 2, 1],
            [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
        ]
        }, {
        high: 3,
        low: -3,
        showArea: true,
        showLine: false,
        showPoint: false,
        fullWidth: true,
        axisX: {
            showLabel: false,
            showGrid: false
        }
        });
    </script>
  </body>
</html>

效果图

点击查看详情

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

刷新页面返回顶部

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

相关博文：

· Chartist.js折线图(四)

· Chartist.js折线图

· echarts.js画折线图

· echarts折线组件

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

历史上的今天：
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 times = function(n) {
	return Array.apply(null, new Array(n));
	};

	var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
	data.labels.push(index + 1);
	data.series.forEach(function(series) {
	series.push(Math.random() * 100)
	});

	return data;
	}, {
	labels: [],
	series: times(4).map(function() { return new Array() })
	});

	var options = {
	showLine: false,
	axisX: {
	labelInterpolationFnc: function(value, index) {
	return index % 13 === 0 ? 'W' + value : null;
	}
	}
	};

	var responsiveOptions = [
	['screen and (min-width: 640px)', {
	axisX: {
	labelInterpolationFnc: function(value, index) {
	return index % 4 === 0 ? 'W' + value : null;
	}
	}
	}]
	];

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