Question

我正在尝试自定义区域图表的工具提示。我正在使用Highchart。

我正在绘制区域图中的3个系列。我的要求是在图表中的顶部中心的固定位置显示工具提示。现在，当我将光标放在任何点时，工具提示应显示所有系列名称及其当前光标所在的值。请参阅下图：

目前我可以在顶部显示工具提示 - 中心并将鼠标放在任何一点显示当前系列名称和数据，但它显示所有3个位置的当前系列名称。

Highchart选项：

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    title: {
        text: 'ACCUMULATED WEALTH'
    },
    xAxis: {
        categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        tickmarkPlacement: 'on',
        crosshair: {
            width: 1,
          color: "#ccc"
                },
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: false
        },
        opposite: true,
        labels: {
            formatter: function() {
              return '$' + this.value + 'k';
          }
        },
    },
    tooltip: {
      backgroundColor: 'none',
      borderWidth: 0,
      shadow: false,
      useHTML: true,
      shared: true,
      padding: 0,
      split: false,
      headerFormat: "",
      pointFormat: '<table><tr><td>{point.y}</td><td>{point.y}</td><td>{point.y}</td></tr>' +
      '<tr><td>{series.name}</td><td>{series.name}</td><td>{series.name}</td></tr></table>',
      footerFormat: "",
      positioner: function () {
        return { x: 250, y: 25 };
      }
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    series: [{
        name: 'Cash Flow',
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
    }, {
        name: 'Appreciation',
        data: [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
    }, {
        name: 'Principal',
        data: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33]
    }]
});

以下是我到目前为止的尝试： https://jsfiddle.net/2pdossk7/13/

请帮忙。提前谢谢！

Answer 1

如果没有tooltip.formatter，可能很难达到预期的效果。

这是您在格式化程序中构建工具提示文本的方法：

  formatter: function(tooltip) {
    const points = this.points;
    let str = '<table><tr>';

    points.forEach(point => {
      str += '<td style="text-align:center">' + point.y + '</td>';
    });

    str += '</tr><tr>';

    points.forEach(point => {
      str += '<td><span style="font-size:20px;color:' + point.color + '">●</span> ' + point.series.name + '</td>';
    });

    str += '</tr></table>';

    return str;
  },

将其置于图表的中心位置：

  positioner: function () {
    const chart = this.chart;

    return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop + 10 };
  }

示例和输出

https://jsfiddle.net/eb3ou25v/

Answer 2

您可以使用pointFormat方法获得所需的结果这就是你如何使用这个

pointFormat: '<table style="text-align:center; display: inline-block; background: white;"><tr><td>{point.y}</td></tr>' +
  '<tr><td><span style="font-size:20px;color:{series.color}">●</span> {series.name}</td></tr></table>',

positioner: function () {
    const chart = this.chart;        
    return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop - 20 };
  }

表示jsfiddle示例click here

Highchart - 面积图：自定义工具提示

2 个答案:

示例和输出