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

點擊下載anychart最新試用版

數據可視化任務

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

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

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

以下是我們解決此任務所需的內容：

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

• 樞軸點的幾個數學計算。

方案概述

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

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

定制技術指標

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

一旦你閱讀它，你就會意識到當數據映射準備就緒并且創建了計算機對象時，我們需要定義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 = [];
}

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

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

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

以下是完整代碼：

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正版授權的朋友可以。

有關產品資訊的更多精彩內容，敬請關注下方的微信公眾號▼▼▼