Anychart/Anystock 技术指标答案

【问题标题】：Anychart/Anystock Technical IndicatorsAnychart/Anystock 技术指标
【发布时间】：2018-02-01 18:40:55
【问题描述】：

我有一个每日股票投资组合价格的折线图，但我们还希望显示所选时间段内每日价格的变化百分比。我在Technical Indicators 和Rate of Change(ROC) 中找到了，但它需要定义一个周期，我希望它比较的价格是数据系列中的第一个价格。有没有办法做到这一点？提前感谢您的帮助。

更新：因此，在查看文档后，comparisonMode("percent") 似乎会做我想要的数学运算，但我无法找出一种方法来绘制结果，而不仅仅是创建一个 y 轴值。

【问题讨论】：

标签： anychart

【解决方案1】：

是的，为此，AnyStock 提供了比较模式。比较模式不会影响线的系列形状或其他任何东西。例如，与系列中的第一个价格相比，它可以重新计算价值（其他模式可用）。您可以在下面找到一个示例，该示例显示了如何使用比较模式。另外，您可以在this article了解更多关于比较模式的信息

anychart.onDocumentReady(function () {
    
    var dataTable = anychart.data.table();
    // data comes from the function in https://cdn.anychart.com/csv-data/dji-daily-short.js
    dataTable.addData(get_dji_daily_short_data());

    var firstMapping = dataTable.mapAs({value: 1});

    var chart = anychart.stock();
    chart.padding(10, 10, 10, 50);

    var nonePlot = chart.plot(0);
    nonePlot.line(firstMapping);
    nonePlot.legend().titleFormat(function (){return "comparisonMode='none'"});
    // Set comparison mode to 'none'
    nonePlot.yScale().comparisonMode("none");

    var valuePlot = chart.plot(1);
    var valueSeries = valuePlot.line(firstMapping);
    valuePlot.legend().titleFormat(function (){return "comparisonMode='value'"});
	valuePlot.legend().itemsFormat(function () {
        return "Value: " + anychart.format.number(this.valueChange, 3, ".", "") ;
    });
  valueSeries.tooltip().format(function() {
  	return 'Value change: ' + anychart.format.number(this.valueChange, 3, ".", "") ;
  });
    // Set comparison mode 'value'
    valuePlot.yScale().comparisonMode("value");

    var percentPlot = chart.plot(2);
   var percentSeries = percentPlot.line(firstMapping);
    percentPlot.legend().titleFormat(function (){return "comparisonMode='percent'"});
  	percentPlot.legend().itemsFormat(function () {
        return "Value: " + this.valuePercentChange + '%';
    });
    percentSeries.tooltip().format(function() {
  	return 'Percent change: ' + this.valuePercentChange + '%';
  });
    percentPlot.yAxis().labels().format("{%value}%");
    // Set comparison mode to 'percent'
    percentPlot.yScale().comparisonMode("percent");

    chart.title("Stock: Different Comparison Modes");
    chart.container("container");
    chart.draw();
});

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-stock.min.js"></script>

<script src="https://cdn.anychart.com/csv-data/dji-daily-short.js"></script>
<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>
<div id="container"></div>

【讨论】：