ZingChart绘制带日期的面积图

代码案例，参考

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      min-height: 530px;
      width: 650px;
      height: 350px;
    }
 
    .zc-ref {
      display: none;
    }
  </style>
</head>
 
<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["xxx", "xxx"];
    let chartConfig = {
      type: 'area',
      title: {
        text: '标题',
        fontColor: '#4caee7',
      },
      subtitle: {
        text: '副标题',
        fontColor: '#cb8670',
      },
      plot: {
        activeArea: true,
        animation: {
          delay: 50,
          effect: 'ANIMATION_SLIDE_LEFT',
          method: 'ANIMATION_REGULAR_EASE_OUT',
          sequence: 'ANIMATION_NO_SEQUENCE',
          speed: 1500,
        },
        hoverMarker: {
          size: '8px',
        },
        stacked: true,
      },
      plotarea: {
        backgroundColor: '#fff',
      },
      scaleX: {                       // x轴
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        // lineColor: '#333',
        // maxItems: 6,
        // minValue: 1274313600000,
        // step: 600000,
        // tick: {
        //   lineColor: '#333',
        // },
        // transform: {
        //   type: 'date',
        //   all: '%D, %d %M<br>%h:%i %A',
        //   item: {
        //     visible: false,
        //   },
        // },
      },
      scaleY: {
        item: {
          padding: '4px',
        },
        lineColor: '#333',
        tick: {
          lineColor: '#333',
        },
      },
      series: [{          // y轴
          values: [11, 36, 7, 44, 11, 28, 42],
          backgroundColor: '#cb8670',
          lineColor: '#cb8670',
          marker: {
            backgroundColor: '#cb8670',
            borderColor: '#fff',
            borderWidth: '2px',
          },
        },
        // {
        //   values: [21, 29, 14, 16, 28, 35, 21, 18, 11, 7, 4, 9, 25, 15, 33, 13],
        //   backgroundColor: '#4caee7',
        //   lineColor: '#4caee7',
        //   marker: {
        //     backgroundColor: '#4caee7',
        //     borderColor: '#fff',
        //     borderWidth: '2px',
        //   },
        // },
      ],
    };
 
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  </script>
</body>
 
</html>

效果图

点击查看详情

posted @ 2024-05-22 16:24 DogLeftover 阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· ZingChart绘制面积折线图

· amCharts绘制基于日期的面积图

· Qt图表绘制（QtCharts）-绘制简单的面积图（2）原创

· v-charts areaStyle All In One

· 一篇文章带你了解面积图

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

历史上的今天：
2022-05-22 spring5入门（二十七）：WebFlux实现，函数式编程模型
2022-05-22 spring5入门（二十六）：WebFlux实现，注解编程模型
2022-05-22 spring5入门（二十五）：Reactor
2022-05-22 spring5入门（二十四）：Webflux简介

ZingChart绘制带日期的面积图

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>ZingSoft Demo</title>
	<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
	<style>
	.chart--container {
	min-height: 530px;
	width: 650px;
	height: 350px;
	}

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

	<body>
	<div id="myChart" class="chart--container">
	<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
	</div>
	<script>
	ZC.LICENSE = ["xxx", "xxx"];
	let chartConfig = {
	type: 'area',
	title: {
	text: '标题',
	fontColor: '#4caee7',
	},
	subtitle: {
	text: '副标题',
	fontColor: '#cb8670',
	},
	plot: {
	activeArea: true,
	animation: {
	delay: 50,
	effect: 'ANIMATION_SLIDE_LEFT',
	method: 'ANIMATION_REGULAR_EASE_OUT',
	sequence: 'ANIMATION_NO_SEQUENCE',
	speed: 1500,
	},
	hoverMarker: {
	size: '8px',
	},
	stacked: true,
	},
	plotarea: {
	backgroundColor: '#fff',
	},
	scaleX: { // x轴
	labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	// lineColor: '#333',
	// maxItems: 6,
	// minValue: 1274313600000,
	// step: 600000,
	// tick: {
	// lineColor: '#333',
	// },
	// transform: {
	// type: 'date',
	// all: '%D, %d %M<br>%h:%i %A',
	// item: {
	// visible: false,
	// },
	// },
	},
	scaleY: {
	item: {
	padding: '4px',
	},
	lineColor: '#333',
	tick: {
	lineColor: '#333',
	},
	},
	series: [{ // y轴
	values: [11, 36, 7, 44, 11, 28, 42],
	backgroundColor: '#cb8670',
	lineColor: '#cb8670',
	marker: {
	backgroundColor: '#cb8670',
	borderColor: '#fff',
	borderWidth: '2px',
	},
	},
	// {
	// values: [21, 29, 14, 16, 28, 35, 21, 18, 11, 7, 4, 9, 25, 15, 33, 13],
	// backgroundColor: '#4caee7',
	// lineColor: '#4caee7',
	// marker: {
	// backgroundColor: '#4caee7',
	// borderColor: '#fff',
	// borderWidth: '2px',
	// },
	// },
	],
	};

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

	</html>