如何从 Highcharts 散点图中的工具提示中隐藏系列名称以进行线性回归答案

【问题标题】：How to hide series name from tooltip in Highcharts scatter plots for linear regression如何从 Highcharts 散点图中的工具提示中隐藏系列名称以进行线性回归
【发布时间】：2018-01-20 04:41:11
【问题描述】：

我使用 Highcharts 4.2.3 创建线性回归图表。我正在关注这个演示：

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-regression/

这是演示中的代码：

Highcharts.chart('container', {
    xAxis: {
        min: -0.5,
        max: 5.5
    },
    yAxis: {
        min: 0
    },
    title: {
        text: 'Scatter plot with regression line'
    },
    series: [{
        type: 'line',
        name: 'Regression Line',
        data: [[0, 1.11], [5, 4.51]],
        marker: {
            enabled: false
        },
        states: {
            hover: {
                lineWidth: 0
            }
        },
        enableMouseTracking: false
    }, {
        type: 'scatter',
        name: 'Observations',
        data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
        marker: {
            radius: 4
        }
    }]
});

我试图在散点图的工具提示中隐藏系列名称Observations，但未能使其工作。我不知道把这段代码放在哪里：

tooltip: {
  formatter: function() {
    return this.x + ', ' + this.y;
  }
}

【问题讨论】：

标签： javascript charts highcharts tooltip

【解决方案1】：

关键是要有一个只返回this.x + ', ' + this.y的工具提示格式化函数。

请参阅Tooltip Documentation 以供参考。演示如下。

Highcharts.chart('container', {
    xAxis: {
        min: -0.5,
        max: 5.5
    },
    yAxis: {
        min: 0
    },
    title: {
        text: 'Scatter plot with regression line'
    },
    series: [{
        type: 'line',
        name: 'Regression Line',
        data: [[0, 1.11], [5, 4.51]],
        marker: {
            enabled: false
        },
        states: {
            hover: {
                lineWidth: 0
            }
        },
        enableMouseTracking: false
    }, {
        type: 'scatter',
        name: 'Observations',
        data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
        marker: {
            radius: 4
        }
    }],
    tooltip: {
      formatter: function() {
        return this.x + ', ' + this.y;
      }
    },
});

<html>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
</body>
</html>

【讨论】：

我已将您的答案内联并使其更易于理解，还有一个更简单的解决方案：使用tooltip.pointFormatter: '{point.x}, {point.y}'。