Question

我想问一下Highcharts的问题。

我有一个Highcharts，我想将预览符号从图例复制到工具提示。

我在两种不同的情况下这样做：

行：我有2个不同的系列（1个带实体，1个带短划线）。这是highcharts的默认设置，所以我想它会更容易一些。
酒吧：为此，我使用的是Highcharts的Pattern Fill扩展名。这也是从Highcharts正式发布的，但没有太多关于自定义内容的信息。

额外信息：

使用highchart 4.1.9
Highcharts传奇符号为您提供<svg>，我实际上并不知道如何复制<svg>

提前致谢

Answer 1

以下是如何从工具提示中的图例项目显示SVG（适用于列和图案填充）：

  tooltip: {
    useHTML: true,
    pointFormatter: function() {
      var point = this,
        series = point.series,
        legendSymbol = "<svg width='20' height='20'>" + series.legendSymbol.element.outerHTML + "</svg>";

      return legendSymbol + series.name + ": <b>" + point.y + "</b><br/>";
    }
  }

必须启用

useHTML才能使其正常工作。

现场演示： https://jsfiddle.net/kkulig/adr9otbg/

Answer 2

可以使用pointFormat或pointFormatter来实现此目标。有使用pointFormatter的两个示例，因此我将使用pointFormat属性来实现此目标。有了这种方法，您就无需启用useHTML属性。

  tooltip: {
    pointFormat:
      '<svg width="10" height="10" style="color:{series.color}">●</svg> 
       <b>{series.name}: {point.percentage:.0f}%</b>
       <br/>',
    shared: true
  },

Highcharts.chart("container", {
  chart: {
    type: "column"
  },
  title: {
    text: null
  },
  credits: {
    enabled: false
  },
  xAxis: {
    categories: ["Apple", "Orange", "Grapes", "Mango", "Pinapple", "Papaya"],
    title: "Fruits"
  },
  yAxis: {
    min: 0,
    floor: 0,
    ceiling: 100,
    title: {
      text: null
    },
    labels: {
      align: "right",
      x: 0,
      y: -2
    }
  },
  tooltip: {
    pointFormat:
      '<svg width="10" height="10" style="color:{series.color}">●</svg> <b>{series.name}: {point.percentage:.0f}%</b><br/>',
    shared: true
  },
  plotOptions: {
    series: {
      stacking: "normal"
    }
  },
  series: [
    {
      name: "Small",
      data: [5, 3, 4, 7, 2, 3],
      color: "#A2CD32"
    },
    {
      name: "Large",
      data: [2, 2, 3, 2, 1, 2],
      color: "#FFF500"
    },
    {
      name: "Medium",
      data: [3, 4, 4, 2, 5, 2],
      color: "#FF220"
    }
  ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Highcharts - 如何在工具提示中显示图例符号

2 个答案: