docs/guide/quickstart.md
# Quick Start
ClChartSupports custom drawing plug-ins, now has plug-in data tag types
## Install ClChart
ClChart can be used with ES6 modules, plain JavaScript and module loaders.
## Manual Download
You can download the latest version of `clchart` from the [GitHub releases](https://github.com/seerline/clchart/releases/latest)
## Npm install
```bash
npm install clchart --save
```
## Build From Source
Cloning and building the base project:
```shell
git clone git@github.com:seerline/clchart.git
cd clchart
npm install
# Then to build
npm run build
```
## HTML
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ClChart 文件 -->
<script src="./clchart.js"></script>
</head>
</html>
```
## Create a Min Chart
### 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](https://seerline.github.io/clchart/stockdata.js) , 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
```html
<!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
```html
<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', 'system.chart', mainLayoutCfg, function (result) {})
Chart.bindData(mainChart, 'MIN')
const volumeLayoutCfg = {
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', 'system.chart', volumeLayoutCfg, 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 view[demo01](https://seerline.github.io/clchart/samples/guide/demo01.html)