如何使用highchart在工具提示中再显示一个数组?

时间:2017-10-17 06:20:48

标签: highcharts

我要在我的项目中找到图表。我用于那个高图。我动态地获得了显示图表的成功。我有3个阵列。第一个数组存储Dates.2nd数组存储跟随者计数和第三个数组存储字符串。所以我想要工具提示中的第三个数组。现在在工具提示显示只是粉丝数现在我想也显示第三阵列数据。那么怎么能对此有所了解呢?请告诉我。在下面我列出了我的代码与屏幕截图任何一个知道然后请帮助我。

这是我的数组=>

var Dates = [];
"11-10-2017"
"12-10-2017"
"13-10-2017"
"14-10-2017"
"15-10-2017"
"16-10-2017"
"17-10-2017" 

var FollowersCount = [];
  "0"
  "0"
  "0"
  "0"
  "50"
  "10"
  "0"

 var Activites = [];
  ""
  ""
  ""
  ""
  "Comment,LIke"
  "Like"
  "0"

我想在正确的工具提示中显示第3个数组。

这是我的代码=>

*Highcharts.chart('container', {
    xAxis: {
        categories: Dates
    },
    credits: {
        enabled: false
    },
    exporting: {
        chartOptions: { // specific options for the exported image
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true
                    }
                }
            }
        },
        sourceWidth: 400,
        sourceHeight: 300,
        scale: 1,
        buttons: {
            customButton: {
                text: 'Next Dates',
                onclick: function () {
                    alert('You pressed the button!');
                }
            },
            anotherButton: {
                text: 'Previous Dates',
                onclick: function () {
                    alert('You pressed another button!');
                }
            }
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    title: {
        text: "Followers"
    },
    series: [{
        name: 'Followers',
        data: FollowersCount 
    }
    ]
});*

这是我的图表截图=>

enter image description here

1 个答案:

答案 0 :(得分:1)

这样做的一种方法是将额外数据添加到每个点,在您的情况下,为每个数据点添加活动。然后使用格式化程序在工具提示中显示它们。我举了一个例子:

首先创建一个包含您的值和活动的新数组:

var processedData = [];
for (var i = 0; i < FollowersCount.length; i++) {
  processedData.push({
    y: FollowersCount[i],
    activity: Activites[i]
  })
}

将其设置为您的数据:

series: [{
  name: 'Followers',
  data: processedData
}]

然后创建一个工具提示以显示此活动,但前提是它存在:

tooltip: {
  formatter: function() {
    let tmpTooltip = '<b>' + this.point.category + '</b><br/><span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.point.y + '</b>';
    if (this.point.activity != "") {
      return tmpTooltip + '<br/><b>Activity:</b>' + this.point.activity;
    } else {
      return tmpTooltip;
    }
  }
}

最后你有一个如下图: http://jsfiddle.net/ewolden/cujmdg85/2/

工作示例http://jsfiddle.net/ewolden/cujmdg85/2/

工具提示格式化程序上的

API http://api.highcharts.com/highcharts/tooltip.formatter