Question

I have a line graph of daily stock portfolio prices but we are also wanting to show the percentage of change in the daily price over the time selected. I have found in the Technical Indicators the Rate of Change(ROC) but it requires a period to be defined and I am wanting the price it compare to is the very first price in the series of data. Is there a way to do this? Thank you for the help in advance.

UPDATE: So after some looking around in the docs it looks like comparisonMode("percent") will do what I want math wise but I have not been able to figure out a way plot the results from it instead of just creating a y axis value.

Answer 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>

Anychart/Anystock Technical Indicators

1 个答案: