AnyChart是靈活的高度可定制的跨瀏覽器、跨平臺JavaScript (HTML5) 圖表控件。今天的教程是自定義技術(shù)指標。下面我們將探討如何逐步將它們添加到JS（HTML5）股票圖表中。感興趣的朋友歡迎下載試用！

點擊下載anychart最新試用版

數(shù)據(jù)可視化任務(wù)

我們將在這里回答的確切問題如下：

如何通過AnyChart可視化燭臺圖表上的軸心點？

為了解釋帶有支點的圖表應(yīng)該如何，客戶附上了以下圖片：

以下是我們解決此任務(wù)所需的內(nèi)容：

• 我們的AnyStock JavaScript圖表庫的自定義技術(shù)指標功能  ;

• 樞軸點的幾個數(shù)學(xué)計算。

方案概述

我們應(yīng)該做的第一件事就是將客戶圖片中的圖表可視化，然后繪制燭臺圖表。

完成后，我們必須計算特定時期的支點。在這種情況下，周期等于30燭臺（30天，周，月等，取決于縮放），然后繪制指標。

定制技術(shù)指標

我們文檔中的“ 自定義技術(shù)指標”部分將引導(dǎo)您完成制作所需文檔的過程。

一旦你閱讀它，你就會意識到當數(shù)據(jù)映射準備就緒并且創(chuàng)建了計算機對象時，我們需要定義setCalculationfunction（）方法。我們的計算從收集期間的高值和低值開始：

computer.setCalculationFunction(function (row) {
  maxArr.push(row.get('high'));
  minArr.push(row.get('low'));

當我們到達第30個燭臺時，我們只是找到最高的高值和最低的值，取近值，然后計算軸點：

if (counter > 29) {
  closeValue = row.get('close');
  max = Math.max.apply(null, maxArr);
  min = Math.min.apply(null, minArr);
  pp = (max + min + closeValue) / 3;
  support1 = pp * 2 - max;
  resistance1 = pp * 2 - min;
  support2 = pp - (max - min);
  resistance2 = pp + (max - min);
  support3 = min - 2 * (max - pp);
  resistance3 = max + 2 * (pp - min);
  counter = 0;
  maxArr = [];
  minArr = [];
}

最后一步是顯示所有系列。

如您所見，此自定義功能允許我們可視化不在支持的技術(shù)指標列表中的任何其他指標。

所以，這里我們有一個帶有支點的美麗股票圖表：

以下是完整代碼：

anychart.onDocumentReady(function () {
  anychart.format.locales.default.numberLocale.decimalsCount = 2;
  anychart.format.locales.default.numberLocale.zeroFillDecimals = true;  // create data table on loaded data
  var dataTable = anychart.data.table();  // the data used in this sample can be obtained from the CDN
  // //cdn.anychart.com/csv-data/csco-daily.js
  dataTable.addData(get_csco_daily_data());  // map loaded data for the candlestick series
  var mapping = dataTable.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4});  // create stock chart
  chart = anychart.stock();  var grouping = chart.grouping();  // set maximum visible points count.
  grouping.maxVisiblePoints(250);  // create first plot on the chart
  var plot = chart.plot(0);

  plot.yScale().maximumGap(0);
  plot.yScale().minimumGap(0);  // move Y axis to the right
  plot.yAxis().orientation("right");  var candleSeries = plot.candlestick(mapping);  // create scroller series with mapped data
  chart.scroller().line(dataTable.mapAs({'value': 4}));  // create computer
  var computer = dataTable.createComputer(mapping);  // set computer output field
  computer.addOutputField('pp', 'pivot');
  computer.addOutputField('sup1', 'support1');
  computer.addOutputField('sup2', 'support2');
  computer.addOutputField('sup3', 'support3');
  computer.addOutputField('res1', 'resistance1');
  computer.addOutputField('res2', 'resistance2');
  computer.addOutputField('res3', 'resistance3');  // initiate variables
  var maxArr = [];  var minArr = [];  var max = 0;  var min = 0;  var closeValue = 0;  var pp = null;  var support1 = null;  var support2 = null;  var support3 = null;  var resistance1 = null;  var resistance2 = null;  var resistance3 = null;  var counter = 0;

  computer.setStartFunction(function() {
    closeValue = 0;
    pp = null;
    support1 = null;
    support2 = null;
    support3 = null;
    resistance1 = null;
    resistance2 = null;
    resistance3 = null;
    counter = 0;    //reset min and max arrays
    maxArr = [];
    minArr = [];
  });  // set calculation function to produce custom indicator math
  computer.setCalculationFunction(function (row) {    //collect high and low during the period
    maxArr.push(row.get('high'));
    minArr.push(row.get('low'));    //if the end of the period (period = 30 candlesticks here)
    if (counter > 29) {      //get close value
      closeValue = row.get('close');      //get highest high and lowest low
      max = Math.max.apply(null, maxArr);
      min = Math.min.apply(null, minArr);      //calculate pivot point
      pp = (max + min + closeValue) / 3;      //calculate support1
      support1 = pp * 2 - max;      //calculate resistance1
      resistance1 = pp * 2 - min;      //calculate support2
      support2 = pp - (max - min);      //calculate resistance2
      resistance2 = pp + (max - min);      //calculate support3
      support3 = min - 2 * (max - pp);      //calculate resistance3
      resistance3 = max + 2 * (pp - min);      //reset candlesticks counter
      counter = 0;      //reset min and max arrays
      maxArr = [];
      minArr = [];
    }    //set calculated data
    row.set('pp', pp);
    row.set('sup1', support1);
    row.set('sup2', support2);
    row.set('sup3', support3);
    row.set('res1', resistance1);
    row.set('res2', resistance2);
    row.set('res3', resistance3);
    counter++;
  });  // map computed column as value
  var pivotMapping = dataTable.mapAs({'value': 'pivot'});  var support1Mapping = dataTable.mapAs({'value': 'support1'});  var support2Mapping = dataTable.mapAs({'value': 'support2'});  var support3Mapping = dataTable.mapAs({'value': 'support3'});  var resistance1Mapping = dataTable.mapAs({'value': 'resistance1'});  var resistance2Mapping = dataTable.mapAs({'value': 'resistance2'});  var resistance3Mapping = dataTable.mapAs({'value': 'resistance3'});  // create line series with mapping
  var pivotLine = plot.line(pivotMapping);
  pivotLine.name('Pivot');
  pivotLine.stroke('#ffaaff 1');  var support1Line = plot.line(support1Mapping);
  support1Line.name('Support1');
  support1Line.stroke('#ffa000 1');  var support2Line = plot.line(support2Mapping);
  support2Line.name('Support2');
  support2Line.stroke('#DF8577 1');  var support3Line = plot.line(support3Mapping);
  support3Line.name('Support3');
  support3Line.stroke('#B75774 1');  var resistance1Line = plot.line(resistance1Mapping);
  resistance1Line.name('Resistance1');
  resistance1Line.stroke('#98ccdd 1');  var resistance2Line = plot.line(resistance2Mapping);
  resistance2Line.name('Resistance2');
  resistance2Line.stroke('#69A3C3 1');  var resistance3Line = plot.line(resistance3Mapping);
  resistance3Line.name('Resistance3');
  resistance3Line.stroke('#1F72B2 1');  // set title width for the chart
  var title = chart.plot(0).legend().title();
  title.width(100);  // set legend for the chart
  var legend = plot.legend();
  legend.enabled(true);  // set maximum height
  legend.maxHeight("17%");
  legend.itemsSpacing(2);  // legend mode and position
  legend.itemsLayout("vertical-expandable");
  legend.position("top");  // paginator position
  legend.paginator().orientation("bottom");  // get chart margin.
  var margin = chart.margin(); 
  margin.right(30);
  margin.left(-30);

  chart.container('container').draw();
  chart.selectRange("year", 4, "last-date", true);
});

想要購買Anychart正版授權(quán)的朋友可以。

有關(guān)產(chǎn)品資訊的更多精彩內(nèi)容，敬請關(guān)注下方的微信公眾號▼▼▼