Question

我们开始在HighCharts开发，但意识到我们需要移动到HighStock以获得缩放/滑块功能。

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

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

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＆＃39;未定义如下。

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

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

此对象正常工作，Fixtime为X，状态为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,
    }]
});

Answer 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/

希望这个帮助

Answer 2

感谢GrzegorzBlachliński发现问题。

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

 dataGrouping: {
                enabled: false
            },

Highstock工具提示Formatter无法显示额外数据

2 个答案: