使用Highcharts在工具提示中的一个系列的多个点

时间:2017-08-14 10:44:40

标签: javascript highcharts

我创建了一个Highcharts样条曲线图。当我试图将鼠标悬停在第4个子弹上时,它会突出显示第3个子弹。同样对于具有相同x和y值的两个子弹(第一和第二),仅显示一个工具提示。我想为同一个项目符号显示两个单独的工具提示。

var categories = ['Negative', 'Somewhat Negative', 'Neutral', 'Somewhat Positive', 'Positive'];

var series = [{
  name: 'Events',
  data: [{
    x: 28,
    y: 2,
    title: 'Point 1 X',
    desc: 'Point 1 Y'
  }, {
    x: 28,
    y: 2,
    title: 'Point 2 X',
    desc: 'Point 2 Y'
  }, {
    x: 34,
    y: 2,
    title: 'Point 3 X',
    desc: 'Point 3 Y'
  }, {
    x: 34,
    y: 3,
    title: 'Point 4 X',
    desc: 'Point 4 Y'
  }, ]
}];

var age = 'Age';
var experience = 'Career';


Highcharts.chart('container',{
  chart: {
    type: 'spline',
    spacingBottom: 15,
    spacingTop: 10,
    spacingLeft: 0,
    spacingRight: 10
  },
  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  xAxis: {
    title: {
      text: age
    },
    min: 15,
    max: 70,
    tickInterval: 5
  },
  yAxis: {
    title: {
      text: experience
    },
    labels: {
      formatter: function() {
        return categories[this.value];
      }
    },
    max: 5,
    min: 0
  },
  tooltip: {
    formatter: function() {
      return '<div style="width: 250px; white-space:normal;"><b>' +     this.point.title + '</b><br/>' + this.point.desc + '</div>';
    },
    useHTML: true
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    spline: {
      marker: {
        enabled: true
      }
    }
  },
  series: series,

});

JS小提琴是:

https://jsfiddle.net/Kartikeshwar/ues15xvu/

0 个答案:

没有答案