Anystock comparisonMode 工具提示中的相同值

Question

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

如图所示，比较值是 107.1，但工具提示显示的是实际值 893.5。我正在使用任何图表 8.0.0

Answer 1

此功能需要几行额外的 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>

Answer 2

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

Anystock comparisonMode 工具提示中的相同值

Anystock comparisonMode same value in tooltip

tooltip

stock

anychart