Start drawing

Initialization project

  • Create a directory clchart-demo
  • Create a demo01.html file
  • Create a js directory for storing javascript files
  • Download the stock data we have prepared , stockdata , place it under the - jsdirectory
  • Copy the previous section we downloaded clchart.js to the js directory below

Now our file structure is

clchart-demo
├── js
|   ├── stockdata.js
|   └── clchart.js
└── demo01.html

Initialize the HTML file

<!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>ClChat Demo</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }

    canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    html, body, .container {
      height: 100%;
      width: 100%;
      background-color: #3b3b42;
      color: #f5f5f5;
    }
    .container {
      position: relative;
    }
    .chart-canvas {
      heigth: 100%;
      width: 100%;
    }
    #cursorChart {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <canvas class="chart-canvas" id="myChart" width="400" height="600"></canvas>
    <canvas class="chart-canvas" id="cursorChart" width="400" height="600"></canvas>
  </div>

  <script src="./js/stockdata.js"></script>
  <script src="./js/clchart.js"></script>
</body>
</html>

Start drawing

<script>
  // Get main canvas and cursor canvas in the page
  // mainCanvas is used to draw the main image
  // cursorCanvas used to draw a cross cursor
  const mainCanvas = document.getElementById('myChart')
  const mainCtx = mainCanvas.getContext('2d')
  const cursorCanvas = document.getElementById('cursorChart')
  const cursorCtx = cursorCanvas.getContext('2d')

  // Set the configuration of the drawing and pass in the mainCanvas and cursorCanvas for initialization
  const syscfg = {
    scale: window.devicePixelRatio,
    axisPlatform: 'web', // 'phone' | 'web'
    mainCanvas: {
      canvas: mainCanvas,
      context: mainCtx
    },
    cursorCanvas: {
      canvas: cursorCanvas,
      context: cursorCtx
    }
  }
  // Create a single stock instance of Chart
  const Chart = ClChart.createSingleChart(syscfg)

  // Clear canvas, and data
  Chart.clear()
  const code = 'SH000001'
  // data initialization
  // Initialize the current transaction date
  Chart.initData(20180413, ClChart.DEF_DATA.STOCK_TRADETIME)
  // Initialize the stock information, the specific field configuration can view the data layer, the definition of various data structures
  Chart.setData('INFO', ClChart.DEF_DATA.FIELD_INFO, getMockData(code, 'INFO'))
  Chart.setData('MIN', ClChart.DEF_DATA.FIELD_MIN, getMockData(code, 'MIN'))
  Chart.setData('TICK', ClChart.DEF_DATA.FIELD_TICK, getMockData(code, 'TICK'))
  Chart.setData('NOW', ClChart.DEF_DATA.FIELD_NOW, getMockData(code, 'NOW'))
  // Configure the size of each area of the canvas
  // The height of the main map
  let mainHeight = canvas.height * 2 / 3
  let mainWidth = canvas.width
  // Set the canvas area layout
  const mainLayoutCfg = {
    layout: ClChart.DEF_CHART.CHART_LAYOUT,
    config: ClChart.DEF_CHART.CHART_NOW,
    rectMain: {
      left: 0,
      top: 0,
      width: mainWidth,
      height: mainHeight
    }
  }
  const mainChart = Chart.createChart('MIN', 'CHART.LINE', mainLayoutCfg, function (result) {})
  Chart.bindData(mainChart, 'MIN')

  const volumeLoyoutCfg = {
    layout: ClChart.DEF_CHART.CHART_LAYOUT,
    config: ClChart.DEF_CHART.CHART_NOWVOL,
    rectMain: {
      left: 0,
      top: mainHeight,
      width: mainWidth,
      height: canvas.height - mainHeight
    }
  }
  const volumeChart = Chart.createChart('MINNOW', 'CHART.LINE', volumeLoyoutCfg, function (result) {})
  Chart.bindData(volumeChart, 'MIN')
  // Perform drawing
  Chart.onPaint()
</script>

We have now completed the drawing of a simple exponential time-sharing diagram. Can viewdemo01

Prev