The main realization of the chart in the realization of bar graph, area graph, line graph multiple ICONS on an axis display, which can format the value of the axis, add watermark, control the data filling of multiple Y axis, realize the function of a map and multiple tables, and add additional watermark, with the change of the mouse, obtain the value of the current mouse.

First, introduce Lightweight – charters. js as static resources into the project and then develop!!

First, basic series

Need to pass LightweightCharts. CreateChart (DOM, {}); Create the icon, this step is similar to init() of Echarts

To create a Series of any type, you need to call the chart.add

Series method, where

is the Series type to be added to the chart. You can add multiple Series to a chart.

We are using one icon to create three series, respectively

 const lineSeries = chart.addLineSeries();
 const areaSeries = chart.addAreaSeries();
 const volumeSeries = chart.addHistogramSeries();
Copy the code

The line chart, area chart and histogram are respectively created, and one line chart needs the left y axis to represent the percentage meaning.

In this way, we need to use rightPriceScale and leftPriceScale property values respectively for processing. PeiceScaleId is set in add[type] addLineSeries() : left indicates that the current data needs to depend on the left Y-axis for implementation. PriceFormat: {type: ‘percent’,}, which indicates that the left Y-axis is in the form of percentages.

const lineSeries = chart.addLineSeries({
  priceScaleId: 'left'./ / that
  color: '#F5A623'.title: 'APR'.priceFormat: {
    type: 'percent',},scaleMargins: {
    top: 0.8.bottom: 0,}});Copy the code

Two, add watermark.

The lightweight API of TradingView is not very perfect. The current watermark only supports the display of text, and the color, size and position of text can be set. Special characters are not supported, so the image we started with is abandoned and the text watermark is used.

TradingView non – lightweight development is not watermark support!


watermark: { / / the watermark
    color: "#F8F8F8".visible: true.text: "Watermark".fontSize: 36.horzAlign: "left".vertAlign: "top"
  }
  
Copy the code

Three, monitor the mouse changes on the icon

The API provides an event subscribeCrosshairMove, which the document describes as being notified when the mouse moves over the chart


chart.subscribeCrosshairMove(function(param) {
    if ( param === undefined || param.time === undefined || param.point.x < 0 || param.point.y < 0) {
      // Determine if the current mouse is not on the chart,
    } else {
      // Determine the handler function to perform while the mouse is currently over the chart}});Copy the code

You can refer to the API for other events

Final code set

const chart = LightweightCharts.createChart(document.body, {
  width: 600.height: 300.localization: { // Set x week time format
    dateFormat: "yyyy-MM-dd",},rightPriceScale: {
    visible: true.scaleMargins: {
      top: 0.3.bottom: 0.25,},borderVisible: false,},leftPriceScale: {
    visible: true.// mode: 2,
    scaleMargins: {
      top: 0.3.bottom: 0.25,},borderVisible: false,},layout: {
    backgroundColor: '# 131722'.textColor: '#d1d4dc',},grid: {
    vertLines: {
            color: 'rgba(42, 46, 57, 0)',},horzLines: {
            color: 'rgba (42, 46, 57, 0.6)',}},watermark: { / / the watermark
    color: "#F8F8F8".visible: true.text: "Watermark".fontSize: 36.horzAlign: "left".vertAlign: "top"}});const areaSeries = chart.addAreaSeries({
    priceFormat: { // Format the areaSeries axis data, using the formatUSDAmount function below
      type: 'custom'.formatter: (p) = > {
        return `${formatUSDAmount(p, true)}`; }},title: 'Data one'.topColor: 'rgba (38198218, 0.56).bottomColor: 'rgba (38198218, 0.04).lineColor: 'rgba (38198218, 1)'.lineWidth: 2});const volumeSeries = chart.addHistogramSeries({
    color: '#26a69a'.priceFormat: {
            type: 'volume',},priceScaleId: ' '.scaleMargins: {
            top: 0.8.bottom: 0,}});const lineSeries = chart.addLineSeries({
  priceScaleId: 'left'.color: '#F5A623'.title: 'APR'.priceFormat: {
    type: 'percent',},scaleMargins: {
    top: 0.8.bottom: 0,}}); areaSeries.setData([ {time: '2019-05-10'.value: 56.91 },
    { time: '2019-05-13'.value: 56.75 },
    { time: '2019-05-14'.value: 56.55 },
    { time: '2019-05-15'.value: 56.81 },
    { time: '2019-05-16'.value: 57.38 },
    { time: '2019-05-17'.value: 58.09 },
    { time: '2019-05-20'.value: 59.01 },
    { time: '2019-05-21'.value: 59.50 },
    { time: '2019-05-22'.value: 59.25 },
    { time: '2019-05-23'.value: 58.87 },
    { time: '2019-05-24'.value: 59.32 },
    { time: '2019-05-28'.value: 59.57},]); volumeSeries.setData([ {time: '2019-05-10'.value: 10707335.00.color: 'rgba (0, 150, 136, 0.8)' },
    { time: '2019-05-13'.value: 13759350.00.color: 'rgba (255,82,82, 0.8) },
    { time: '2019-05-14'.value: 12776175.00.color: 'rgba (255,82,82, 0.8) },
    { time: '2019-05-15'.value: 10806379.00.color: 'rgba (0, 150, 136, 0.8)' },
    { time: '2019-05-16'.value: 11695064.00.color: 'rgba (0, 150, 136, 0.8)' },
    { time: '2019-05-17'.value: 14436662.00.color: 'rgba (0, 150, 136, 0.8)' },
    { time: '2019-05-20'.value: 20910590.00.color: 'rgba (0, 150, 136, 0.8)' },
    { time: '2019-05-21'.value: 14016315.00.color: 'rgba (0, 150, 136, 0.8)' },
    { time: '2019-05-22'.value: 11487448.00.color: 'rgba (255,82,82, 0.8) },
    { time: '2019-05-23'.value: 11707083.00.color: 'rgba (255,82,82, 0.8) },
    { time: '2019-05-24'.value: 8755506.00.color: 'rgba (0, 150, 136, 0.8)' },
    { time: '2019-05-28'.value: 3097125.00.color: 'rgba (0, 150, 136, 0.8)'},]); lineSeries.setData([ {time: '2019-05-10'.value: 12.91 },
    { time: '2019-05-13'.value: 31.75 },
    { time: '2019-05-14'.value: 42.55 },
    { time: '2019-05-15'.value: 54.81 },
    { time: '2019-05-16'.value: 57.38 },
    { time: '2019-05-17'.value: 12.09 },
    { time: '2019-05-20'.value: 76.01 },
    { time: '2019-05-21'.value: 23.50 },
    { time: '2019-05-22'.value: 94.25 },
    { time: '2019-05-23'.value: 25.87 },
    { time: '2019-05-24'.value: 43.32 },
    { time: '2019-05-28'.value: 87.57},]);/ / adaptive
chart.timeScale().fitContent();

chart.subscribeCrosshairMove(function(param) {
    if ( param === undefined || param.time === undefined || param.point.x < 0 || param.point.y < 0) {
      // Determine if the current mouse is not on the chart,
    } else {
      // Determine the handler function to perform while the mouse is currently over the chart}});Copy the code

import Numeral from 'numeral';

// go to the thousandths
export const numToK = (num, n) = > {
  let nu = '0.00';
  if (n > 2) {
    let str = ' ';
    for (let i = 0; i< n; i++) {
      str += '0';
    }
    nu = ` 0.${str}`;
  }
  return Numeral(num).format(` 0,${nu}`)};// Handle the amount isAbbr needs to be abbreviated n- several novels
export const formatUSDAmount = (val, isAbbr, n = 2) = > {
  if(val === null || val === NaN || val === The '-' || val === undefined) {
    return '$0.00'
  }
  let num = val
  const absoluteVal = Math.abs(Number(val));
  / / num = Numeral (num). The format (' 0, [0000] ');
  if(isAbbr) {
    if(absoluteVal >= 1000000 && absoluteVal < 1000000000) {
      num = numToK((Number(val) / 1000000).toFixed(n), n) + "m";
    }else if(absoluteVal >= 1000000000) {
      num = numToK((Number(val) / 1000000000).toFixed(n), n) + "b";
    } else {
      num = numToK((Number(val)).toFixed(n), n); }}else {
    // if(absoluteVal < 1) {
    // num = parseFloat(Number(val));
    // } else {
    // num = parseFloat(Number(val).toFixed(n));
    // }
    num = numToK(Number(val).toFixed(n), n);
  }

  const c = num > 1 ? num.toLocaleString() : num.toString()
  if(val < 0) {
    return c.slice(0.1) +'$'+c.slice(1)}else {
    return '$'+c
  }
}

Copy the code