彩票走势图

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

有关产品资讯的更多精彩内容，敬请关注下方的微信公众号▼▼▼