在Highcharts股票图表上以标签或工具提示显示最后一点的值 [英] Show value of last point as label or tooltip on Highcharts Stock Chart

问题描述

我在一张股票图表中有多个具有不同比例的数据系列(HighCharts).

我想将每个系列连接到其轴或在其上显示每个系列的最后一个点的值(类似于数据标签，但仅用于每个系列的最后一个点)

$(function () {
    $('#container').highcharts({

        chart: {
            renderTo: 'container'
        },
        xAxis: [{
            type: 'datetime'
        }],
        yAxis: [{
            opposite: true,
          lineWidth: 1
        },{
            opposite: true,
          lineWidth: 1
        }],

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 24 * 3600 * 1000, // one day
            yAxis: 1
        }, {
            data: [20000, 2250, 30300, 28000, 27000, 27800, 25800],
            pointStart: Date.UTC(2010, 0, 3),
            pointInterval: 24 * 3600 * 1000, // one day
        }]

    });
});

http://jsfiddle.net/HamedMahdizadeh/4wjc02dw/2/

HighStock

解决方案

您只需要添加一个简单的数据格式化程序，以使数据标签仅在最后一个数据点上显示.

plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function(){
                    var isLast = false;
                    if(this.point.x === this.series.data[this.series.data.length -1].x && this.point.y === this.series.data[this.series.data.length -1].y) isLast = true;

                  return isLast ? this.y : '';
                }
            }
        }
    },

更新了小提琴

I have multiple data series with different scale in one stock chart (HighCharts).

I want to connect each series to it's axis or show value of last point of each series on it (something like data label but just for last point of each series)

$(function () {
    $('#container').highcharts({

        chart: {
            renderTo: 'container'
        },
        xAxis: [{
            type: 'datetime'
        }],
        yAxis: [{
            opposite: true,
          lineWidth: 1
        },{
            opposite: true,
          lineWidth: 1
        }],

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 24 * 3600 * 1000, // one day
            yAxis: 1
        }, {
            data: [20000, 2250, 30300, 28000, 27000, 27800, 25800],
            pointStart: Date.UTC(2010, 0, 3),
            pointInterval: 24 * 3600 * 1000, // one day
        }]

    });
});

http://jsfiddle.net/HamedMahdizadeh/4wjc02dw/2/

HighStock

解决方案

You just need to add a simple data formatter to have the datalables to be displayed only on the last datapoint.

plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function(){
                    var isLast = false;
                    if(this.point.x === this.series.data[this.series.data.length -1].x && this.point.y === this.series.data[this.series.data.length -1].y) isLast = true;

                  return isLast ? this.y : '';
                }
            }
        }
    },

Updated fiddle

这篇关于在Highcharts股票图表上以标签或工具提示显示最后一点的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！