??? ???? ??????

??? ???? ???/??? ???? ??? ???? ???? ?????. ?? ??? ??? ??? ??? ?? ????? ?? ? ???? ??, ???, ??? ?? ??? ??? ???? ?????.

?? JavaScript ????? ??? ???? ?? ??? ? ?? ?? ?????? ?? ? ????. ? ? ???? D3.js, Highcharts, Charts.js, Rechart ?? ?????. ??? ? ????? Highcharts? ???? ??? ?? ????.

---

Highcharts? ? ? ???? SVG ?? ??? ??? ??? ???? ?? JavaScript ????????. JavaScript ?? CSS? ?? ??? ????? ??? ??? ? ????. Highcharts? ?? ??? ?? ? ?? ?? ????? ?????. ???? ??? ?????.

• Highcharts: ?? ??? ??? ?? Highcharts ?????. ??? ?, ??, ?? ??? ??? ? ??? ? ????.
• ???? ??: ??????? ?? ?? ?? ? ???? ??? ??? ? ?????. ? ?? ??? ??? ?? ??, ?? ? Heikin-Ashi, OHLC? ????. ???? ?? ??? ???? GUI? ???? Stock Tools ??? ??? ?? ????.
• Highcharts ??: Highcharts? ???? ? ??????? ???? ??? ?? ??? ??? ??? ? ?? ?? ??? ???? ??? ?????. Highcharts?? ???? ?? ???? ????? ??? ?? ??? ?? SVG ??? ??? ? ?? ??? ?????.
• Highcharts Gantt: ???? ??? ???? ? ???? ??? ??? ?? ?????.

Highcharts Stock? ???? Stock Tools ???? ???? ????? ? ?? ??? ???? ??? ??? ????.

?? ???

????(?? ??? ????)? ???? ?? ??? ???? ??, ?? ?? ??? ??? ?? ??? ???? ? ???? ?? ?? ??????. ?? ?? ?? ??? ???? ??? ?? ???/OHLC(??, ??, ??, ??) ?? ?????.

???? ???? ??? ???? ??? ? ?? Heikin-Ashi('?? ??') ?????. ?? ??? ????? ?? ?? ??? ? ?? ???? ? ??? ??? ?? ??? ?? ?????. ??? ? ?? ?? ??????.

Highcharts API? ??? ??? Heikin-Ashi ??? ?? ??? ? ?? ??? ?????. ? ????? ???? ??? ??? ???. ??? ? ???? Heikin-Ashi ??? ??? ? ??? ???? ???????. ?? ???????!

????

Highcharts? ????? ?? Highcharts? ?????? ???. Highcharts? ????? Highcharts? ???? ? ?? ??? ?????. ?? ? ??? ??? ? ????.

• ?? Highcharts ?????? ???????. ?? ??? ?? Highcharts Stock, Maps ?? Gantt ?????? ????? ?? ????.
• NPM? ?? Highcharts? ???? ??? ?????. ?? React ? Vue? ?? ?? ??? ??????? ?? ?????.
• Highcharts CDN? ???? ??? ?? ??????.

? ????? Highcharts CDN? ??? ?????.

HTML

?? HTML?? Highcharts CDN? ???? ? ???? ???? ??? ???? ????. ?? ? ?? Highcharts? ??? ?? ?? ??? ??? ?????.

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

???? ??? ?? ????? ??? ???? ?? ?? ??? ?? ??? ??? ???? ???.

<script src="https://code.highcharts.com/stock/modules/heikinashi.js"></script>

??????? ???? ?? ??? CDN? Stock Tools ?????. ?? ?? ??? ??? ??? ? ????. Stock Tools ??? ??? ?? ??? ?? ??? ??? ? ??? ???? ????? ???.

<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>

Stock Tools ???? ?? ?? ??? ???? ?? ??? ?? ?? ??? ??? ?? ????.

<script src="https://code.highcharts.com/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/indicators/rsi.js"></script>
<script src="https://code.highcharts.com/indicators/ema.js"></script>
<script src="https://code.highcharts.com/indicators/macd.js"></script>

????? JavaScript?? ??? ? ?? ??? ?? HTML ??? ???? ???.

<div>



<h3>
  
  
  The JavaScript
</h3>

<p><strong>Bringing in our Data</strong><br>
The first item on our itinerary is to bring in the data we will be plotting. Highcharts provides a .getJSON method similar to that of jQuery, which is used for making HTTP requests. It also provides a stockChart class for creating the chart. The stockChart class takes in two parameters:</p>

• The first parameter, renderTo, is the DOM element or the id of the DOM element to which the chart should render.
• The second parameter, options, are the options that structure the chart.

Highcharts.getJSON('https://api.coingecko.com/api/v3/coins/ethereum/ohlc?vs_currency=usd&days=365', 
function (candlestick) {
  // create the chart
  Highcharts.stockChart('container', {
    title: {
      text: 'Untitled Masterpiece'
    },

    series: [
      {
        type: "candlestick",    //heikinashi for Heikin-Ashi chart
        name: "Ethereum",      //chart name
        id: "eth",             // chart id, useful when adding indicators and oscillators
        data: candlestick,      //data gotten from the API call above
      },
    ], 

yAxis: [
      {
        height: "100%",       // height of the candlestick chart
        visible: true,  
      }
    ]
  });
});

? ??? Highcharts?? ???? ?? ???? ?? ??? ??? ?????.

?? ??

Highcharts ?? ??? Highcharts? ?? ?????. ???? ??? ?? ???? ?????? ??? ? ?? ?? ?? ?? ??? ??? ?????(GUI)? ?????? Javascript? ?? ? ?? ?? ?? ??? ??? ? ????.

??? ??(?? ??)? ?????(?? ?????)? ???????. ??? ??? ?? ???? yAxis ??? ?? ???? ???.

series: [
      {
        type: "candlestick",
        name: "Ethereum",
        id: "eth",           // chart id, useful when adding indicators and oscillators
        data: data,
      },
         {
        type: "abands",      //acceleration bands indicator
        id: "overlay",       // overlays use the same scale and are plotted on the same axes as the main series.
        linkedTo: "eth",    //targets the id of the data series that it points to
        yAxis: 0,           // the index of yAxis the particular series connects to
      },
      {
        type: "ao",          // awesome oscillator
        id: "oscillator",    // oscillators requires additional yAxis be created due to different data extremes.
        linkedTo: "eth",    //targets the id of the data series that it points to
        yAxis: 1,           // the index of yAxis the particular series connects to
      },
    ],
    yAxis: [
      {
        //index 0
        height: "80%",      //height of main series 80%

        resize: {
          enabled: true,     // allow resize of chart heights
        },
      },
      {
        //index 1
        top: "80%",         // oscillator series to begin at 80%
        height: "20%",      //height of oscillator series
      },
    ],

?? ???? ?? ??? ??? ????.

?? ??? ??

?? ????? ???? ?? ?? ??? ???? ??? ??? ???? ???.

Highcharts? ? ?? ?? ??? ?? ??? ?????.

• Highcharts.CSSObject: ?? ???? ???? ?? ?????. ?? ?? ?? ?? SVG ??? HTML ??? ??? ??? ???? ?? Highcharts?? ???? stockChart ??? ?? ?? ??? ???? ?????.
• styledMode: ??: ???? false???. ??? ??? ????? ?? ??? ?? SVG? ?? ??? ???? ????. ??? ?? ???? ????? CSS ??? ?????.

? ????? Highcharts ?? ???? ??? ????. ??? ?? ?? ???:

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

?? ??? ??? ????.

??

Highcharts? ???? ??? ???? ??? ??? ?? ???? ????? ??? ?? ?? ??? ????? ??? ? ????. Highcharts? ???? ???? ???? ?? ???? ??? ??? ???? ??? ??? ???? ?? ??? ????? ??? ? ????. ?? ????? ???? ?? ???? ???? ??? ???? ???? ???? ??? ???? ??? ?? ???? ??? ?????.

? ???? ??? ??? ?? ?? Highcharts? ???? ?? ???? ??? ??? ?? ??? ??? ?????. ?? ??? ??? ???? Highcharts? ???? API? ???? ???? ???? ? ?? ??????.

? ??? ??? ???: Highcharts? ???? ???? ??? ???? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!