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

【问题标题】：Highstock tooltip Formatter not able to display extra dataHighstock 工具提示格式化程序无法显示额外数据
【发布时间】：2017-06-02 11:41:25
【问题描述】：

我们开始使用 HighCharts 进行开发，但意识到我们需要迁移到 HighStock 以获得缩放/滑块功能。

我们有一个图表与工具提示完美配合，可以准确显示我们需要的数据，如下所示来自 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、state 为 y、flags 为将填充到工具提示中的文本描述时，此对象可以正常工作。我们使用键来命名数据 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,
    }]
});

【问题讨论】：

能否请您为您的问题创建一个 jsFiddle ？它有助于调试问题。
@ali 努力为 JS Fiddle 创建数据对象。刚刚创建了 Fiddle，但没有数据就毫无意义（忽略双关语）。
系列中“myData”的值是多少
@JalayOza 一个典型的值是，x : 2017/05/01, y : 5, name : "A string here up to 50 characters but in this test max is 10"，数据结构在高图表中完美运行。我感觉 Keys 不起作用，因为我无法像在 Highcharts 中那样定位 this.point.name
我试图用你拥有的价值观来复制你的问题。看起来您的图表在我这边工作正常：jsfiddle.net/1sw02pm2/1 但是，我认为您的问题可能与 Highstock 中的数据分组有关。您可以尝试禁用它api.highcharts.com/highstock/…

标签： javascript jquery highcharts highstock

【解决方案1】：

你可以这样做

看你的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/

希望有帮助

【讨论】：

非常感谢您抽出宝贵时间回复，很遗憾您的解决方案无法满足我的要求。

【解决方案2】：

感谢 – Grzegorz Blachliński 发现问题。

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

 dataGrouping: {
                enabled: false
            },

【讨论】：