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>
    #chrome50Overall,
    #chrome50Detail {
      /* min-height: 400px; */
      opacity: 0;
      transition: opacity .3s;
    }
    #chrome84Overall {
      width: 450px;
      height: 500px;
    }
    #chrome84Detail {
      width: 300px;
      height: 500px;
    }
 
    #chrome50Overall.loaded,
    #chrome50Detail.loaded {
      opacity: 1;
    }
 
    #chrome84Overall, #chrome84Detail{
      float: left;
      margin-left: 5px;
    }
    #inputs{
      position: absolute;
      top: 50px;
      left: 360px;
    }
 
    /* #inputs {
      background: #f7f7f7;
      border: 1px solid #DDD;
      border-top: none;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      font-family: Open Sans;
      padding: 1rem 1rem;
      margin: 0 0 1.5rem 0;
      user-select: none;
      width: 100%;
    }
 
    #inputs input {
      height: auto;
    }
 
    #inputs label {
      margin: 0 0 0 4px;
      cursor: pointer;
      transform: translateY(-2px);
    }
 
    .row {
      max-width: 600px;
      display: flex;
    }
 
    .row+.row {
      margin-top: 1rem;
    }
 
    .col {
      display: flex;
      flex: 1;
    } */
  </style>
</head>
 
<body class="zc-body">
 
  <div id="chrome84Overall">
  </div>
 
  <div id="chrome84Detail">
  </div>
 
  <div id="inputs">
    <div class="row">
 
      <div class="col">
        <input type="checkbox" id="checkboxErrors84" checked>
        <label for='checkboxErrors84'>84 Errors</label>
      </div>
 
      <div class="col">
        <input type="checkbox" id="checkboxIps84" checked>
        <label for="checkboxIps84">84 IP's</label>
      </div>
 
      <div class="col">
        <input type="checkbox" id="checkboxErrors85">
        <label for="checkboxErrors85">85 Errors</label>
      </div>
 
      <div class="col">
        <input type="checkbox" id="checkboxIps85">
        <label for="checkboxIps85">85 IP's</label>
      </div>
 
    </div>
  </div>
 
  <script>
    ZC.LICENSE = ["xxx", "xxx"]; // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location
    let chrome84Detail = 'chrome84Detail';
    let chrome84Overall = 'chrome84Overall';
 
    // 定义4各复选框
    // Checkbox Ids
    let checkboxErrors84 = 'checkboxErrors84';
    let checkboxIps84 = 'checkboxIps84';
    let checkboxErrors85 = 'checkboxErrors85';
    let checkboxIps85 = 'checkboxIps85';
 
    // 包含了浏览器使用数据的数组
    // CHART DATA
    // -----------------------------
    let lastIndex = null;
    let totalUsage = [
      74844938, 67916452, 85397784, 54840784, 71261006, 71914665, 69877920,
      69797876, 64015606, 47538624, 53405488, 71237670, 69854483, 67229795,
      65940984, 59888233, 46967265, 85144680, 63681846, 70527432, 97712043,
      90345661, 67326277, 54836594, 59923602, 78117849, 73954211, 71816590,
      72253684, 64360719, 84948147, 54739648, 69613566, 70720606, 72607842,
      69859811, 64228413, 84706194, 58472683, 68672444, 77388533, 82989307,
      80641084, 79055948, 62823593, 71047012,
    ];
    // 对应的日期数组
    let dates = [
      1598659200000, 1598832000000, 1598918400000, 1599004800000, 1599091200000,
      1599177600000, 1599264000000, 1599350400000, 1599436800000, 1599523200000,
      1599609600000, 1599696000000, 1599782400000, 1599868800000, 1599955200000,
      1600041600000, 1600128000000, 1600214400000, 1600300800000, 1600387200000,
      1600473600000, 1600560000000, 1600646400000, 1600732800000, 1600819200000,
      1600905600000, 1600992000000, 1601078400000, 1601164800000, 1601251200000,
      1601337600000, 1601424000000, 1601510400000, 1601596800000,
    ];
 
    // 数据
    // Chrome84
    let chrome84 = {
      errors: [
        1987211, 2021396, 1319415, 1323925, 2113920, 2188253, 2170018, 2242853,
        2177930, 1716637, 1705411, 2308796, 2346018, 2260725, 2144784, 1922230,
        1461423, 1536246, 1758595, 2138455, 2180136, 2210526, 1886849, 1319023,
        1496247, 1924003, 1932682, 1657985, 990855, 567546, 428471, 281371, 383746,
        287059, 274365, 271813, 160613, 92252, 122070, 122713, 117868, 147609,
        114567, 78055, 56243, 68693,
      ],
      ips: [
        326981, 188499, 141138, 188086, 188172, 308552, 348591, 164533, 191780,
        202985, 138117, 244959, 290445, 169790, 233407, 179223, 128217, 126069,
        189766, 185304, 392733, 207176, 194674, 116104, 136448, 169075, 156413,
        185558, 69164, 41741, 34424, 19603, 34582, 28694, 25430, 22227, 22204, 9195,
        13378, 14607, 22537, 14738, 18576, 17979, 8901, 6580,
      ],
    };
    chrome84.errorsOverall = chrome84.errors.reduce(combine);
    chrome84.ipsOverall = chrome84.ips.reduce(combine);
 
    // 数据
    // Chrome85
    let chrome85 = {
      errors: [
        6844, 10334, 78449, 111280, 76589, 89109, 104457, 134231, 166989, 153959,
        209849, 204582, 208316, 313541, 408221, 497291, 995646, 1310197, 1274536,
        1120691, 1579763, 1634092, 1852177, 1865755, 1679352, 1496063, 1575591,
        1994408, 2136103, 1930382, 2231977, 1887391, 1468535, 1543169,
      ],
      ips: [
        1089, 1936, 7473, 15217, 9618, 8606, 16459, 20271, 18850, 25662, 32633,
        15639, 17965, 44984, 53072, 49306, 68848, 112911, 109622, 116628, 270445,
        172383, 230430, 177202, 297868, 153620, 160157, 230393, 269336, 272074,
        137277, 209094, 193838, 259192,
      ],
    };
 
    // CHART CONFIG
    // -----------------------------
 
    // Chrome 84
    let chrome84_overall = {
      type: 'area',
      globals: {
        fontFamily: 'Open Sans',
      },
      border: '1px solid #ddd',
      title: {
        text: 'Chrome 84 & 85: Errors vs IPs',
        backgroundColor: 'rgb(247, 247, 247)',
        border: '1px solid #ddd',
        color: 'rgb(44, 84, 55)',
        fontSize: '18px',
        height: '40px',
        padding: '10px',
        textAlign: 'left',
      },
      legend: {
        marginTop: '61px',
        toggleAction: 'none',
      },
      plot: {
        tooltip: {
          visible: false,
        },
        alphaArea: 1,
        marker: {
          visible: false,
        },
      },
      plotarea: {
        margin: '62px 52px 52px',
      },
      scaleY: {
        short: true,
      },
      scaleX: {
        values: dates,
        transform: {
          type: 'date',
          all: '%dd-%M-%y (%D)',
        },
        markers: [{
            type: 'line',
            lineColor: '#2196F3',
            lineWidth: '4px',
            range: [13],
            label: {
              angle: 0,
              backgroundColor: '#2196F3',
              color: '#FFF',
              offsetX: '-58px',
              offsetY: '-285px',
              padding: '5px',
              text: 'Chrome 85 Released',
            },
          },
          {
            alpha: 0.1,
            backgroundColor: '#000',
            type: 'area',
            range: [2, 3],
          },
          {
            alpha: 0.1,
            backgroundColor: '#000',
            type: 'area',
            range: [9, 10],
          },
          {
            alpha: 0.1,
            backgroundColor: '#000',
            type: 'area',
            range: [16, 17],
          },
          {
            alpha: 0.1,
            backgroundColor: '#000',
            type: 'area',
            range: [23, 24],
          },
          {
            alpha: 0.1,
            backgroundColor: '#000',
            type: 'area',
            range: [30, 31],
          },
          {
            alpha: 0.1,
            backgroundColor: '#000',
            type: 'area',
            range: [37, 38],
          },
        ],
      },
      series: [{
          text: 'Errors',
          values: chrome84.errors,      // 指定数据
          backgroundColor: '#3cba54',
          legendItem: {
            text: 'Chrome 84 Errors',
          },
          lineColor: '#3cba54',
          lineWidth: '0px',
        },
        {
          text: 'IPs',
          values: chrome84.ips,      // 指定数据
          backgroundColor: '#f4c20d',
          legendItem: {
            text: 'Chrome 84 IPs',
          },
          lineColor: '#f4c20d',
          lineWidth: '0px',
        },
        {
          text: 'Errors',
          values: chrome85.errors,      // 指定数据
          backgroundColor: '#db3236',
          legendItem: {
            text: 'Chrome 85 Errors',
          },
          lineColor: '#db3236',
          lineWidth: '0px',
          visible: false,
        },
        {
          text: 'IPs',
          values: chrome85.ips,      // 指定数据
          backgroundColor: '#2196F3',
          legendItem: {
            text: 'Chrome 85 IPs',
          },
          lineColor: '#2196F3',
          lineWidth: '0px',
          visible: false,
        },
      ],
      credit: {
        visible: false // 设置此选项为false以隐藏版权信息
      },
      mediaRules: [{
        maxWidth: '700px',
        legend: {
          visible: false,
        },
      }, ],
      crosshairX: {
        plotLabel: {
          backgroundColor: '#FFF',
          border: '1px solid #ddd',
          fontSize: '16px',
          thousandsSeparator: ',',
          padding: '5px',
        },
      },
    };
 
    // Chrome 84
    let chrome84_detail = {
      type: 'pie',
      globals: {
        fontFamily: 'Open Sans',
      },
      border: '1px solid #ddd',
      title: {
        backgroundColor: 'rgb(247, 247, 247)',
        border: '1px solid #ddd',
        color: 'rgb(44, 84, 55)',
        fontSize: '18px',
        height: '40px',
        padding: '10px',
        text: 'Chrome 84 & 85 Details - Errors vs IPs',
        textAlign: 'left',
      },
      subtitle: {
        text: 'Overall',
        textAlign: 'left',
        x: '6px',
        y: '40px',
      },
      legend: {
        visible: false,
        toggleAction: 'remove',
      },
      plot: {
        tooltip: {
          visible: false,
        },
        valueBox: {
          text: '%t: %v',
          visible: true,
          placement: 'out',
          fontSize: '11px',
          thousandsSeparator: ',',
          offsetR: '15px',
          rules: [{
              rule: '%p == 0',
              placement: 'center',
              offsetY: '-17px',
            },
            {
              rule: '%p == 1',
              placement: 'center',
              offsetY: '-7px',
            },
            {
              rule: '%p == 2',
              placement: 'center',
              offsetY: '7px',
            },
            {
              rule: '%p == 3',
              placement: 'center',
              offsetY: '17px',
            },
          ],
        },
        slice: 70,
      },
      plotarea: {
        margin: '62px 52px 52px',
      },
      series: [{
          text: 'Errors',
          values: [chrome84.errorsOverall],
          backgroundColor: '#3cba54',
        },
        {
          text: 'IPs',
          values: [chrome84.ipsOverall],
          backgroundColor: '#f4c20d',
        },
        {
          text: 'Errors',
          values: [chrome85.errorsOverall],
          backgroundColor: '#db3236',
          visible: false,
        },
        {
          text: 'IPs',
          values: [chrome85.ipsOverall],
          backgroundColor: '#2196F3',
          visible: false,
        },
      ],
      credit: {
        visible: false // 设置此选项为false以隐藏版权信息
      },
    };
 
    // RENDER CHART
    // -----------------------------
 
    // AREA
    // Render area chart
    zingchart.render({
      id: chrome84Overall,
      data: {
        gui: {
          behaviors: [{
            id: 'Reload',
            enabled: 'none',
          }, ],
        },
        graphset: [chrome84_overall],
      },
      height: '400px',
      width: '100%',
      events: {
        // lets update the ring chart based on where we are hovering
        guide_mousemove: function(p) {
          // If it's a new index...
          if ((lastIndex && lastIndex !== p.items[0].nodeindex) || !lastIndex) {
            // Update the last index
            lastIndex = p.items[0].nodeindex;
            let detailJSON = zingchart.exec(chrome84Detail, 'getdata');
            for (let i = 0; i < p.items.length; i++) {
              detailJSON.graphset[0].series[p.items[i].plotindex].values = [
                p.items[i].value,
              ];
            }
            detailJSON.graphset[0].subtitle.text = new Date(
              p.items[0].keyvalue
            ).toDateString();
            zingchart.exec(chrome84Detail, 'setdata', {
              data: detailJSON,
            });
          }
        },
        load: loaded(chrome84Overall),
      },
    });
 
    // RING
    // Render ring chart
    zingchart.render({
      id: chrome84Detail,
      data: {
        gui: {
          behaviors: [{
            id: 'Reload',
            enabled: 'none',
          }, ],
        },
        graphset: [chrome84_detail],
      },
      height: '400px',
      width: '100%',
      events: {
        load: loaded(chrome84Detail),
      },
    });
 
    // CHECKBOX TOGGLE EVENTS
    // -----------------------------
    document
      .getElementById(checkboxErrors84)
      .addEventListener('click', toggleGraphs);
    document.getElementById(checkboxIps84).addEventListener('click', toggleGraphs);
    document
      .getElementById(checkboxErrors85)
      .addEventListener('click', toggleGraphs);
    document.getElementById(checkboxIps85).addEventListener('click', toggleGraphs);
 
    // UPDATE THE CHART
    // -----------------------------
    let updateArray = [{
        visible: true
      },
      {
        visible: true
      },
      {
        visible: false
      },
      {
        visible: false
      },
    ];
 
    // CHART RENDERED
    // -----------------------------
    // Set CSS class to show chart after render
    function loaded(id) {
      let chart = document.querySelector('#' + id);
      chart.classList.add('loaded');
    }
 
    // HELPER FNS
    // -----------------------------
 
    // Checkbox click handler
    function toggleGraphs() {
      let plotIndex = 0;
 
      // Determine plot index
      switch (this.id) {
        case checkboxErrors84:
          plotIndex = 0;
          break;
        case checkboxIps84:
          plotIndex = 1;
          break;
        case checkboxErrors85:
          plotIndex = 2;
          break;
        case checkboxIps85:
          plotIndex = 3;
          break;
      }
 
      // Toggle array boolean state
      updateArray[plotIndex].visible = this.checked;
 
      // Update the chart
      zingchart.exec(chrome84Overall, 'appendseriesdata', {
        data: updateArray,
      });
      zingchart.exec(chrome84Detail, 'appendseriesdata', {
        data: updateArray,
      });
    }
 
    // Combine 2 values
    function combine(a, b) {
      return a + b;
    }
  </script>
</body>
 
</html>

效果图

posted @ 2024-05-28 09:37 DogLeftover 阅读(25) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· ZingChart绘制带日期的面积图

· ZingChart绘制透明样条面积图

· Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo

· 项目内网PGIS地图的使用：以天地图做打底，使用leaflet.js交互式地图 JavaScript 库做开发。

· ECharts

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

历史上的今天：
2022-05-28 mysql基础（十四）：存储过程与存储函数
2022-05-28 mysql视图：创建、查看、修改、删除
2022-05-28 mysql数据类型：整数、浮点、定点、位类型、日期时间、文本字符串、二进制字符串
2022-05-28 mysql约束：非空、唯一、主键、自增、外键、检查、默认
2022-05-28 mysql DML：增删改操作
2022-05-28 mysql子查询：单行、多行、相关、EXISTS与NOTEXISTS关键字
2022-05-28 mysql DDL：数据库操作、数据表操作；DCL底层执行流程

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>
	#chrome50Overall,
	#chrome50Detail {
	/* min-height: 400px; */
	opacity: 0;
	transition: opacity .3s;
	}
	#chrome84Overall {
	width: 450px;
	height: 500px;
	}
	#chrome84Detail {
	width: 300px;
	height: 500px;
	}

	#chrome50Overall.loaded,
	#chrome50Detail.loaded {
	opacity: 1;
	}

	#chrome84Overall, #chrome84Detail{
	float: left;
	margin-left: 5px;
	}
	#inputs{
	position: absolute;
	top: 50px;
	left: 360px;
	}

	/* #inputs {
	background: #f7f7f7;
	border: 1px solid #DDD;
	border-top: none;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	font-family: Open Sans;
	padding: 1rem 1rem;
	margin: 0 0 1.5rem 0;
	user-select: none;
	width: 100%;
	}

	#inputs input {
	height: auto;
	}

	#inputs label {
	margin: 0 0 0 4px;
	cursor: pointer;
	transform: translateY(-2px);
	}

	.row {
	max-width: 600px;
	display: flex;
	}

	.row+.row {
	margin-top: 1rem;
	}

	.col {
	display: flex;
	flex: 1;
	} */
	</style>
	</head>

	<body class="zc-body">

	<div id="chrome84Overall">
	</div>

	<div id="chrome84Detail">
	</div>

	<div id="inputs">
	<div class="row">

	<div class="col">
	<input type="checkbox" id="checkboxErrors84" checked>
	<label for='checkboxErrors84'>84 Errors</label>
	</div>

	<div class="col">
	<input type="checkbox" id="checkboxIps84" checked>
	<label for="checkboxIps84">84 IP's</label>
	</div>

	<div class="col">
	<input type="checkbox" id="checkboxErrors85">
	<label for="checkboxErrors85">85 Errors</label>
	</div>

	<div class="col">
	<input type="checkbox" id="checkboxIps85">
	<label for="checkboxIps85">85 IP's</label>
	</div>

	</div>
	</div>

	<script>
	ZC.LICENSE = ["xxx", "xxx"]; // DEFINE CHART LOCATIONS (IDS)
	// -----------------------------
	// Main chart render location
	let chrome84Detail = 'chrome84Detail';
	let chrome84Overall = 'chrome84Overall';

	// 定义4各复选框
	// Checkbox Ids
	let checkboxErrors84 = 'checkboxErrors84';
	let checkboxIps84 = 'checkboxIps84';
	let checkboxErrors85 = 'checkboxErrors85';
	let checkboxIps85 = 'checkboxIps85';

	// 包含了浏览器使用数据的数组
	// CHART DATA
	// -----------------------------
	let lastIndex = null;
	let totalUsage = [
	74844938, 67916452, 85397784, 54840784, 71261006, 71914665, 69877920,
	69797876, 64015606, 47538624, 53405488, 71237670, 69854483, 67229795,
	65940984, 59888233, 46967265, 85144680, 63681846, 70527432, 97712043,
	90345661, 67326277, 54836594, 59923602, 78117849, 73954211, 71816590,
	72253684, 64360719, 84948147, 54739648, 69613566, 70720606, 72607842,
	69859811, 64228413, 84706194, 58472683, 68672444, 77388533, 82989307,
	80641084, 79055948, 62823593, 71047012,
	];
	// 对应的日期数组
	let dates = [
	1598659200000, 1598832000000, 1598918400000, 1599004800000, 1599091200000,
	1599177600000, 1599264000000, 1599350400000, 1599436800000, 1599523200000,
	1599609600000, 1599696000000, 1599782400000, 1599868800000, 1599955200000,
	1600041600000, 1600128000000, 1600214400000, 1600300800000, 1600387200000,
	1600473600000, 1600560000000, 1600646400000, 1600732800000, 1600819200000,
	1600905600000, 1600992000000, 1601078400000, 1601164800000, 1601251200000,
	1601337600000, 1601424000000, 1601510400000, 1601596800000,
	];

	// 数据
	// Chrome84
	let chrome84 = {
	errors: [
	1987211, 2021396, 1319415, 1323925, 2113920, 2188253, 2170018, 2242853,
	2177930, 1716637, 1705411, 2308796, 2346018, 2260725, 2144784, 1922230,
	1461423, 1536246, 1758595, 2138455, 2180136, 2210526, 1886849, 1319023,
	1496247, 1924003, 1932682, 1657985, 990855, 567546, 428471, 281371, 383746,
	287059, 274365, 271813, 160613, 92252, 122070, 122713, 117868, 147609,
	114567, 78055, 56243, 68693,
	],
	ips: [
	326981, 188499, 141138, 188086, 188172, 308552, 348591, 164533, 191780,
	202985, 138117, 244959, 290445, 169790, 233407, 179223, 128217, 126069,
	189766, 185304, 392733, 207176, 194674, 116104, 136448, 169075, 156413,
	185558, 69164, 41741, 34424, 19603, 34582, 28694, 25430, 22227, 22204, 9195,
	13378, 14607, 22537, 14738, 18576, 17979, 8901, 6580,
	],
	};
	chrome84.errorsOverall = chrome84.errors.reduce(combine);
	chrome84.ipsOverall = chrome84.ips.reduce(combine);

	// 数据
	// Chrome85
	let chrome85 = {
	errors: [
	6844, 10334, 78449, 111280, 76589, 89109, 104457, 134231, 166989, 153959,
	209849, 204582, 208316, 313541, 408221, 497291, 995646, 1310197, 1274536,
	1120691, 1579763, 1634092, 1852177, 1865755, 1679352, 1496063, 1575591,
	1994408, 2136103, 1930382, 2231977, 1887391, 1468535, 1543169,
	],
	ips: [
	1089, 1936, 7473, 15217, 9618, 8606, 16459, 20271, 18850, 25662, 32633,
	15639, 17965, 44984, 53072, 49306, 68848, 112911, 109622, 116628, 270445,
	172383, 230430, 177202, 297868, 153620, 160157, 230393, 269336, 272074,
	137277, 209094, 193838, 259192,
	],
	};

	// CHART CONFIG
	// -----------------------------

	// Chrome 84
	let chrome84_overall = {
	type: 'area',
	globals: {
	fontFamily: 'Open Sans',
	},
	border: '1px solid #ddd',
	title: {
	text: 'Chrome 84 & 85: Errors vs IPs',
	backgroundColor: 'rgb(247, 247, 247)',
	border: '1px solid #ddd',
	color: 'rgb(44, 84, 55)',
	fontSize: '18px',
	height: '40px',
	padding: '10px',
	textAlign: 'left',
	},
	legend: {
	marginTop: '61px',
	toggleAction: 'none',
	},
	plot: {
	tooltip: {
	visible: false,
	},
	alphaArea: 1,
	marker: {
	visible: false,
	},
	},
	plotarea: {
	margin: '62px 52px 52px',
	},
	scaleY: {
	short: true,
	},
	scaleX: {
	values: dates,
	transform: {
	type: 'date',
	all: '%dd-%M-%y (%D)',
	},
	markers: [{
	type: 'line',
	lineColor: '#2196F3',
	lineWidth: '4px',
	range: [13],
	label: {
	angle: 0,
	backgroundColor: '#2196F3',
	color: '#FFF',
	offsetX: '-58px',
	offsetY: '-285px',
	padding: '5px',
	text: 'Chrome 85 Released',
	},
	},
	{
	alpha: 0.1,
	backgroundColor: '#000',
	type: 'area',
	range: [2, 3],
	},
	{
	alpha: 0.1,
	backgroundColor: '#000',
	type: 'area',
	range: [9, 10],
	},
	{
	alpha: 0.1,
	backgroundColor: '#000',
	type: 'area',
	range: [16, 17],
	},
	{
	alpha: 0.1,
	backgroundColor: '#000',
	type: 'area',
	range: [23, 24],
	},
	{
	alpha: 0.1,
	backgroundColor: '#000',
	type: 'area',
	range: [30, 31],
	},
	{
	alpha: 0.1,
	backgroundColor: '#000',
	type: 'area',
	range: [37, 38],
	},
	],
	},
	series: [{
	text: 'Errors',
	values: chrome84.errors, // 指定数据
	backgroundColor: '#3cba54',
	legendItem: {
	text: 'Chrome 84 Errors',
	},
	lineColor: '#3cba54',
	lineWidth: '0px',
	},
	{
	text: 'IPs',
	values: chrome84.ips, // 指定数据
	backgroundColor: '#f4c20d',
	legendItem: {
	text: 'Chrome 84 IPs',
	},
	lineColor: '#f4c20d',
	lineWidth: '0px',
	},
	{
	text: 'Errors',
	values: chrome85.errors, // 指定数据
	backgroundColor: '#db3236',
	legendItem: {
	text: 'Chrome 85 Errors',
	},
	lineColor: '#db3236',
	lineWidth: '0px',
	visible: false,
	},
	{
	text: 'IPs',
	values: chrome85.ips, // 指定数据
	backgroundColor: '#2196F3',
	legendItem: {
	text: 'Chrome 85 IPs',
	},
	lineColor: '#2196F3',
	lineWidth: '0px',
	visible: false,
	},
	],
	credit: {
	visible: false // 设置此选项为false以隐藏版权信息
	},
	mediaRules: [{
	maxWidth: '700px',
	legend: {
	visible: false,
	},
	}, ],
	crosshairX: {
	plotLabel: {
	backgroundColor: '#FFF',
	border: '1px solid #ddd',
	fontSize: '16px',
	thousandsSeparator: ',',
	padding: '5px',
	},
	},
	};

	// Chrome 84
	let chrome84_detail = {
	type: 'pie',
	globals: {
	fontFamily: 'Open Sans',
	},
	border: '1px solid #ddd',
	title: {
	backgroundColor: 'rgb(247, 247, 247)',
	border: '1px solid #ddd',
	color: 'rgb(44, 84, 55)',
	fontSize: '18px',
	height: '40px',
	padding: '10px',
	text: 'Chrome 84 & 85 Details - Errors vs IPs',
	textAlign: 'left',
	},
	subtitle: {
	text: 'Overall',
	textAlign: 'left',
	x: '6px',
	y: '40px',
	},
	legend: {
	visible: false,
	toggleAction: 'remove',
	},
	plot: {
	tooltip: {
	visible: false,
	},
	valueBox: {
	text: '%t: %v',
	visible: true,
	placement: 'out',
	fontSize: '11px',
	thousandsSeparator: ',',
	offsetR: '15px',
	rules: [{
	rule: '%p == 0',
	placement: 'center',
	offsetY: '-17px',
	},
	{
	rule: '%p == 1',
	placement: 'center',
	offsetY: '-7px',
	},
	{
	rule: '%p == 2',
	placement: 'center',
	offsetY: '7px',
	},
	{
	rule: '%p == 3',
	placement: 'center',
	offsetY: '17px',
	},
	],
	},
	slice: 70,
	},
	plotarea: {
	margin: '62px 52px 52px',
	},
	series: [{
	text: 'Errors',
	values: [chrome84.errorsOverall],
	backgroundColor: '#3cba54',
	},
	{
	text: 'IPs',
	values: [chrome84.ipsOverall],
	backgroundColor: '#f4c20d',
	},
	{
	text: 'Errors',
	values: [chrome85.errorsOverall],
	backgroundColor: '#db3236',
	visible: false,
	},
	{
	text: 'IPs',
	values: [chrome85.ipsOverall],
	backgroundColor: '#2196F3',
	visible: false,
	},
	],
	credit: {
	visible: false // 设置此选项为false以隐藏版权信息
	},
	};

	// RENDER CHART
	// -----------------------------

	// AREA
	// Render area chart
	zingchart.render({
	id: chrome84Overall,
	data: {
	gui: {
	behaviors: [{
	id: 'Reload',
	enabled: 'none',
	}, ],
	},
	graphset: [chrome84_overall],
	},
	height: '400px',
	width: '100%',
	events: {
	// lets update the ring chart based on where we are hovering
	guide_mousemove: function(p) {
	// If it's a new index...
	if ((lastIndex && lastIndex !== p.items[0].nodeindex) \|\| !lastIndex) {
	// Update the last index
	lastIndex = p.items[0].nodeindex;
	let detailJSON = zingchart.exec(chrome84Detail, 'getdata');
	for (let i = 0; i < p.items.length; i++) {
	detailJSON.graphset[0].series[p.items[i].plotindex].values = [
	p.items[i].value,
	];
	}
	detailJSON.graphset[0].subtitle.text = new Date(
	p.items[0].keyvalue
	).toDateString();
	zingchart.exec(chrome84Detail, 'setdata', {
	data: detailJSON,
	});
	}
	},
	load: loaded(chrome84Overall),
	},
	});

	// RING
	// Render ring chart
	zingchart.render({
	id: chrome84Detail,
	data: {
	gui: {
	behaviors: [{
	id: 'Reload',
	enabled: 'none',
	}, ],
	},
	graphset: [chrome84_detail],
	},
	height: '400px',
	width: '100%',
	events: {
	load: loaded(chrome84Detail),
	},
	});

	// CHECKBOX TOGGLE EVENTS
	// -----------------------------
	document
	.getElementById(checkboxErrors84)
	.addEventListener('click', toggleGraphs);
	document.getElementById(checkboxIps84).addEventListener('click', toggleGraphs);
	document
	.getElementById(checkboxErrors85)
	.addEventListener('click', toggleGraphs);
	document.getElementById(checkboxIps85).addEventListener('click', toggleGraphs);

	// UPDATE THE CHART
	// -----------------------------
	let updateArray = [{
	visible: true
	},
	{
	visible: true
	},
	{
	visible: false
	},
	{
	visible: false
	},
	];

	// CHART RENDERED
	// -----------------------------
	// Set CSS class to show chart after render
	function loaded(id) {
	let chart = document.querySelector('#' + id);
	chart.classList.add('loaded');
	}

	// HELPER FNS
	// -----------------------------

	// Checkbox click handler
	function toggleGraphs() {
	let plotIndex = 0;

	// Determine plot index
	switch (this.id) {
	case checkboxErrors84:
	plotIndex = 0;
	break;
	case checkboxIps84:
	plotIndex = 1;
	break;
	case checkboxErrors85:
	plotIndex = 2;
	break;
	case checkboxIps85:
	plotIndex = 3;
	break;
	}

	// Toggle array boolean state
	updateArray[plotIndex].visible = this.checked;

	// Update the chart
	zingchart.exec(chrome84Overall, 'appendseriesdata', {
	data: updateArray,
	});
	zingchart.exec(chrome84Detail, 'appendseriesdata', {
	data: updateArray,
	});
	}

	// Combine 2 values
	function combine(a, b) {
	return a + b;
	}
	</script>
	</body>

	</html>