Highstock 工具提示格式化程序无法显示额外数据

Question

我们开始在 HighCharts 中开发，但意识到我们需要迁移到 HighStock 以获得 Zoom/slider 功能。

我们有一个与工具提示完美配合的图表，可以准确显示我们需要的数据，如下图所示，来自 Highcharts。

为了在 HighStock 中实现这一点，我们只需使用以下代码来格式化工具提示。

tooltip: {
    headerFormat: "",
    useHTML: true,
    formatter: function () {
        return '<span style="font-size: 10px">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span><br/><span style="color:' + this.color + '">\u25CF</span> <b>' + this.point.name + '</b><br/>';
    }
},

我们尝试切换到 HighStock 以实现相同的格式，但我们收到的所有信息都显示在工具提示中，其中显示 'REASON_TIMED' 未定义，如下所示。

我们的数据对象 myData 创建如下：-

myData .push([Date.parse(obj.FixTimeLocal), obj.State, obj.Flags]);

此对象在 Fixtime 为 X、状态为 y 和标志为将填充在工具提示中的文本描述的情况下正常工作。我们使用键来命名数据 x,y,name 以便我们可以访问 this.point.name。向工具提示添加额外的文本。我们哪里错了？已经试了几天了，还是无法获取数据。

Highcharts.stockChart('container', {
    //new chart style
    rangeSelector: {
       selected: 1
    },

    title: {
        text: 'Test Graph'
    },

    xAxis: {
        type: 'datetime'
    },

    yAxis: {
        categories: ['Unknown', 'State 1', 'Disarmed', 'Armed', 'Service Timed', 'Unauthorised', 'Alert', 'Watch', 'Alarm'],
        title: {
            useHTML: true,
            text: 'Alert Type'
        }
    },

    tooltip: {
        headerFormat: "",
        useHTML: true,
        formatter: function () {
            var s = '<span style="font-size: 10px">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span>';

            $.each(this.points, function () {
                s += '<br/><span style="color:' + this.color + '">\u25CF</span><b>' + this.point.name + '</b><br/>'; // Code falls over here this.point.name is not recognised.
            });

            return s;
        }
    },

    series: [{
        type: 'areaspline',
        keys: ['x', 'y', 'name'],
        data: myData,
        marker: {
            enabled: true,
            radius: 1.5
        },
        threshold: null,

        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0.5).get('rgba')],
                [1, Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0).get('rgba')]
            ]
        },

color: Highcharts.getOptions().colors[3],
lineWidth: 0.5,
threshold: null,
    }]
});

Answer 1

感谢 – Grzegorz Blachliński 找出问题。

在我的系列中，我必须设置以下内容。现在正在处理我的数据，我可以定位 point.name 以使其显示在工具提示中。

 dataGrouping: {
                enabled: false
            },

Answer 2

你可以做到

看看你的 html 会是

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

代码可能是这样的

Highcharts.chart('container', {
        rangeSelector: {
       selected: 1
    },

    title: {
        text: 'Test Graph'
    },

        // Its your X data
    xAxis: {
        categories: ['2017/05/01', '2017/05/02', '2017/05/03', '2017/05/04', '2017/05/05', '2017/05/06','2017/05/07', '2017/05/08', '2017/05/09', '2017/05/10']
    },

    yAxis: {
        //categories: ['Unknown', 'State 1', 'Disarmed', 'Armed', 'Service Timed', 'Unauthorised', 'Alert', 'Watch', 'Alarm'],
        title: {
            useHTML: true,
            text: 'Alert Type'
        }
    },

tooltip: {
        headerFormat: "",
        useHTML: true,
        formatter: function () {
            var s = '<span style="font-size: 10px; width:100%;">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span>';

            $.each(this.points, function () {
                s += '<br/><span style="color:' + this.color + '">\u25CF</span><b>' + this.point.name + '</b><br/>'; // Code falls over here this.point.name is not recognised.
            });

            return s;
        },
    },



series: [{
                type: 'areaspline',
        // its your yAxis category
        name: "Unknown",
        // Its your Y Data
        data: [5,10,56,22,54,35,32,26,36],
    },{
                type: 'areaspline',
        name: "State 1",
        // Its your Y Data value
        data: [10,30,59,22,24,55,52,66,46],
    }]

});

现场直播：https://jsfiddle.net/jalayoza/eaue85rb/6/

希望对您有所帮助

Highstock 工具提示格式化程序无法显示额外数据

Highstock tooltip Formatter not able to display extra data

javascript

jquery

highcharts

highstock