ZingChart绘制面积折线图

代码案例

 <!doctype html>
<html class="zc-html">
 
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="./zingchart.min.js"></script>
  <style>
    .zc-html,
    .zc-body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
    }
 
    .chart--container {
      height: 350px;
      width: 500px;
      /* min-height: 530px; */
    }
 
    .zc-ref {
      display: none;
    }
  </style>
</head>
 
<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
 
  <script>
    ZC.LICENSE = ["xxx", "xxx"];
    let chartConfig = {
      type: 'range',
      series: [{
          values: [
            [15, 30],
            [20, 40],
            [16, 35],
            [21, 30],
            [25, 45],
            [18, 27],
            [23, 35],
            [29, 39],
            [27, 30],
            [19, 34],
          ],
        },
        {
          values: [
            [25, 35],
            [12, 40],
            [19, 30],
            [26, 27],
            [12, 35],
            [31, 39],
            [52, 59],
            [29, 36],
            [21, 25],
            [9, 29],
          ],
        },
        {
          values: [
            [40, 45],
            [30, 43],
            [35, 36],
            [41, 50],
            [50, 54],
            [45, 52],
            [39, 42],
            [31, 40],
            [41, 49],
            [35, 40],
          ],
        },
      ],
    };
 
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  </script>
</body>
 
</html>

效果图

posted @ 2024-05-23 10:18 DogLeftover 阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· ZingChart绘制带日期的面积图

· AnyChart绘制折线图

· v-echarts 使用折线图

· 折线图-实心白边折线图

· echart 折线图

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

ZingChart绘制面积折线图

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!doctype html>
	<html class="zc-html">

	<head>
	<meta charset="utf-8">
	<title>ZingSoft Demo</title>
	<script nonce="undefined" src="./zingchart.min.js"></script>
	<style>
	.zc-html,
	.zc-body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	}

	.chart--container {
	height: 350px;
	width: 500px;
	/* min-height: 530px; */
	}

	.zc-ref {
	display: none;
	}
	</style>
	</head>


	<body class="zc-body">

	<div id="myChart" class="chart--container">
	<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
	</div>

	<script>
	ZC.LICENSE = ["xxx", "xxx"];
	let chartConfig = {
	type: 'range',
	series: [{
	values: [
	[15, 30],
	[20, 40],
	[16, 35],
	[21, 30],
	[25, 45],
	[18, 27],
	[23, 35],
	[29, 39],
	[27, 30],
	[19, 34],
	],
	},
	{
	values: [
	[25, 35],
	[12, 40],
	[19, 30],
	[26, 27],
	[12, 35],
	[31, 39],
	[52, 59],
	[29, 36],
	[21, 25],
	[9, 29],
	],
	},
	{
	values: [
	[40, 45],
	[30, 43],
	[35, 36],
	[41, 50],
	[50, 54],
	[45, 52],
	[39, 42],
	[31, 40],
	[41, 49],
	[35, 40],
	],
	},
	],
	};

	zingchart.render({
	id: 'myChart',
	data: chartConfig,
	height: '100%',
	width: '100%',
	});
	</script>
	</body>

	</html>