samples/demo/kline.html

<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css?family=Cousine|Roboto+Mono" rel="stylesheet">
<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>ClChat Demo</title>
  <link rel="stylesheet" href="../css/client.css">
</head>
<body>
  <div id="container" class="container">
  </div>

  <script src="../ClChart.js"></script>
  <script src="../SisClient.js"></script>
  <script src="./config.js"></script>
  <script>

    const container = document.getElementById('container')

    const syscfg = {
      scale: window.devicePixelRatio,
      axisPlatform: 'web', // 'phone' | 'web'
      container: container
    }
    const  mainCanvas ={
      width: container.offsetWidth * window.devicePixelRatio,
      height: container.offsetHeight * window.devicePixelRatio,
    }
    // Create a single stock Chart instance
    const Chart = ClChart.createSingleChart(syscfg)

    let isInited = false;

    function initLayout() {
      if (isInited) return; 
      isInited = true;

      Chart.clearLayout();

      let mainHeight = mainCanvas.height * 2 / 3
      const mainLayoutCfg = {
        layout: {
          offset: {
            left: 5,
            right: 10
          }
        },
        buttons: ClChart.DEF_CHART.CHART_BUTTONS,
        config: ClChart.DEF_CHART.CHART_KBAR,
        rectMain: {
          left: 0,
          top: 0,
          width: mainCanvas.width,
          height: mainHeight
        }
      }
      Chart.createChart('user.kbar', 'system.chart', mainLayoutCfg, function (result) {
        //  console.log(result)
      })
      const volumeLayoutCfg = {
        layout: {
          offset: {
            left: 5,
            right: 10
          }
        },
        config: ClChart.DEF_CHART.CHART_VBAR,
        rectMain: {
          left: 0,
          top: mainHeight,
          width: mainCanvas.width,
          height: mainCanvas.height - mainHeight
        }
      }
      Chart.createChart('user.vbar', 'system.chart', volumeLayoutCfg, function (result) {
        //  console.log(result)
      })
    }
    function paintDrawline() {
      const code = sisdb.code
      const peroid = 'DAY'

      let infoData
      Promise.all([
        sisClient.getData(code, 'info'),
        sisClient.getData(code, peroid, { search:{ start:-3000,stop:-1 } })
      ])
      .then(([infoData, dayData]) => {
        Chart.clear()
        Chart.initData(sisdb.tradeDate, ClChart.DEF_DATA.STOCK_TRADETIME)
        Chart.setData('INFO', ClChart.DEF_DATA.FIELD_INFO, infoData.values)
        Chart.setData(peroid, ClChart.DEF_DATA.FIELD_DAY, dayData.values)

        Chart.bindData(Chart.getChart('user.kbar'), peroid)
        Chart.bindData(Chart.getChart('user.vbar'), peroid)

        Chart.onPaint()
      })
    }
      
    window.onload = () => {
      initLayout()
      paintDrawline()
    }
  </script>
</body>
</html>