日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

g2繪制雙折線圖+柱形圖+自定義legend

作者：小五Ivy 更新時間： 2022-02-10 編程語言
這里繪制的柱形圖是由雙折線圖的差值獲得的，下面的代碼可直接復制。

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>柱狀-折線(柱形的數據由折線差值得到)</title>
  </head>
  <body>
    <div id="container"></div>
    <script>
      /*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body
        .clientHeight
    </script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>

    <script>
      const data1 = [
        {
          month: '12/07',
          type: '貨幣需求',
          value: 45
        },
        {
          month: '13/07',
          type: '貨幣需求',
          value: 39
        },
        {
          month: '14/07',
          type: '貨幣需求',
          value: 40
        }
      ]

      const data2 = [
        {
          month: '12/07',
          type: '貨幣供給',
          value: 33
        },
        {
          month: '13/07',
          type: '貨幣供給',
          value: 53
        },
        {
          month: '14/07',
          type: '貨幣供給',
          value: 32
        }
      ]

      //折線差的數組
      const gaps = []
      //當前所有數字的數組
      const nums = []

      const data3 = data1.map((item, index) => {
        const gap = item.value - data2[index].value
        gaps.push(gap)
        nums.push(item.value)
        nums.push(data2[index].value)
        return {
          month: item.month,
          value: gap,
          type: '貨幣缺口'
        }
      })

      const data4 = [...data1, ...data2]
      console.log(data4, data3)

      const chart = new G2.Chart({
        container: 'container',
        width: 300,
        height: 180,
        padding: 'auto'
      })

      chart.scale('value', {
        min: Math.min(...gaps) - 1,
        max: Math.max(...nums) + 1
      })

      const view3 = chart.view()
      view3.source(data3)
      view3
        .interval()
        .position('month*value')
        .color('month', ['l(270) 0:#007bc7 1:#00dffd']) //柱形圖漸變

      const view4 = chart.view()
      view4.source(data4)
      view4
        .line()
        .position('month*value')
        .color('type', ['#FFA900', '#FE5264'])
        .shape('smooth')

      view4.axis('month', false)
      view4.axis('value', false)

      //自定義legend
      chart.legend({
        custom: true,
        clickable: false,
        textStyle: {
          fill: '#9bb7ef'
        },
        items: [
          {
            value: '貨幣缺口',
            marker: {
              symbol: 'square',
              fill: '#3bf',
              radius: 5,
              lineWidth: 5
            }
          },
          {
            value: '貨幣需求',
            marker: {
              symbol: 'hyphen',
              fill: '#FFA900',
              stroke: '#FFA900',
              radius: 5
            }
          },
          {
            value: '貨幣供給',
            marker: {
              symbol: 'hyphen',
              fill: '#FE5264',
              stroke: '#FE5264',
              radius: 5
            }
          }
        ]
      })
      chart.tooltip(false)

      chart.render()
    </script>
  </body>
</html>

原文鏈接：https://blog.csdn.net/weixin_44471622/article/details/105429047

欄目分類
最近更新