Anystock comparison在工具提示中输入相同的值

Question

使用股票图表时，我使用带有日期的comparisonMode。十字准线显示的值是正确的，但工具提示中的值是实际值（未比较）。我怎样才能显示比较值呢？

正如您在图片中看到的，比较值是107.1，但工具提示显示实际值893.5。我正在使用anychart 8.0.0

Answer 1

我很高兴地通知您，在新版本的AnyStock 8.1.0中，计算出的更改值可从点信息中获得。它可以用在工具提示和图例中。我想这正是你要找的。使用此功能的示例您可以找到on this link。现在每个点的上下文包括valueChange和valuePercentChange属性。

Answer 2

这个功能需要一些额外的JS代码，我在下面准备了一个例子来说明它是如何工作的。现在比较值显示在十字准线标签，工具提示和图例中。

anychart.onDocumentReady(function() {
    var dataTable = anychart.data.table();
    dataTable.addData(get_dji_daily_short_data());

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

    chart = anychart.stock();


    var plot = chart.plot();
    var series0 = plot.line(firstMapping);
    var series1 = plot.line(secondMapping);

    var yScale = plot.yScale();

    // Set comparison mode.
    yScale.comparisonMode("value");

    var xScale = chart.xScale();

    chart.container("container");
    chart.draw();

    //reference points of both series
    var firstVisibleValue0 = null;
    var firstVisibleValue1 = null;

    //after chart rendering format tooltip and legend
    getVisibleValues();
    tooltipLegendFormat(firstVisibleValue0, firstVisibleValue1);

    //after every scroll change recalculate reference points
    //and reformat tooltip and legend
    chart.scroller().listen('scrollerchange', function() {
        getVisibleValues();
        tooltipLegendFormat(firstVisibleValue0, firstVisibleValue1);
    });

    function getVisibleValues() {
        // Gets scale minimum.
        var minimum = xScale.getMinimum();
        //select data from mappings
        var selectable0 = firstMapping.createSelectable();
        var selectable1 = secondMapping.createSelectable();
        // Sets value for search.
        var select0 = selectable0.search(minimum, "nearest");
        var select1 = selectable1.search(minimum, "nearest");
        // get values in first visible points
        firstVisibleValue0 = select0.get('value');
        firstVisibleValue1 = select1.get('value');
    }

    function tooltipLegendFormat(firstVisibleValue0, firstVisibleValue1) {
        //format tooltips and legends of both series
        series0.tooltip().format(function () {
            return  'Series 0: ' + Math.round(this.value - firstVisibleValue0);
        });
        series0.legendItem().format(function(){
            return  'Series 0: ' + Math.round(this.value - firstVisibleValue0);
        });
        series1.tooltip().format(function () {
            return  'Series 1: ' + Math.round(this.value - firstVisibleValue1);
        });
        series1.legendItem().format(function(){
            return  'Series 1: ' + Math.round(this.value - firstVisibleValue1);
        });
    }

});

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

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