高图：无法显示工具提示

Question

有人可以指导我解决以下问题吗：

1) 如何根据 json 在状态下实现 tootltip onhover。我确实尝试并创建了一个 fiddle.

提交日期：05/20/2017, submissionResponseDate:06/20/2017, stateResponse:Approved

2) 我想根据 Json 数据（Approved/Approval 待定）显示状态颜色。

3) 我是否需要为 "hc-key" 的所有州传递 json，因为 allAreas 本身并未显示所有州

http://fiddle.jshell.net/a65yufqf/

US Map

Answer 1

每个点的解决方案

1>对于工具提示，您必须使用格式化程序

tooltip: {
  formatter: function() {
    return 'submissionDate: <b>' + this.point.submissionDate + '</b><br/>' +
      'submissionResponseDate: <b>' + this.point.submissionResponseDate + '</b><br/>' +
      'stateResponse: <b>' + this.point.stateResponse + '</b><br/>'

  }
},

2>准备 JSON 包含颜色的数据

  var data = [{
    "hc-key": "us-ca",
    "submissionDate": "05/20/2017",
    "submissionResponseDate": "06/20/2017",
    "stateResponse": "Approved",
    "color": "#C40401",
  }, {
    "hc-key": "us-or",
    "submissionDate": "05/20/2017",
    "submissionResponseDate": "",
    "stateResponse": "Approval Pending",
    "color": "#0200D0"
  }];

3>如您在示例图片中所示，您需要 JSON.So 中没有的默认颜色，为此您必须在系列中使用 nullColor: 'grey',。

series: [{
allAreas: true,
  data: data,
  mapData: Highcharts.maps['countries/us/us-all'],
  joinBy: 'hc-key',
  //name: 'Random data',
  nullColor: 'grey', //add this to color default area
  states: {
    hover: {
      color: '#BADA55'
    }
  },
  dataLabels: {
    enabled: true,
    format: '{point.name}'
  }
}, {
  name: 'Separators',
  type: 'mapline',
  data: Highcharts.geojson(Highcharts.maps['countries/us/us-all-all'], 'mapline'),
  color: 'black',
  showInLegend: false,
  enableMouseTracking: false
}]

Fiddle 演示

Answer 2

项目 #1：工具提示

要向您的地图添加工具提示以提取您定义的 JSON 数据值，您需要添加以下内容：

tooltip: {
  formatter: function () {
    /* set value if the state hasn't yet responded */
    if (!this.point.submissionResponseDate) {
      this.point.submissionResponseDate = 'not applicable';
    }
    /* format the tooltip */
    return '<strong>' + this.point.name + '</strong><br />' +  
            'Submission date: ' + this.point.submissionDate + 
            '<br />Submission response date: ' + this.point.submissionResponseDate + 
            '<br />State response: ' + this.point.stateResponse;
  }
},

您的工具提示将如下所示：

请注意我为您的回复日期添加的 if 语句...而不是显示空值（就像您在示例中对俄勒冈州所做的那样），这将显示对用户更有帮助的值。

项目 #2：根据 JSON 数据陈述颜色

您可以解析 JSON 数据并根据状态是已批准还是待批准添加 value 属性。然后该值将采用您在 colorAxis:

中定义的颜色

  /* check the JSON data and add a value for approved
   or approval pending that will be picked up by your 
   colorAxis formatting */
  for (d = 0; d < data.length; d++) {
    if (data[d].stateResponse == "Approved") {
      data[d].value = -1;       /* will color state red */
    } else {
      data[d].value = 1;        /* will color state blue */
    }
  }

您需要运行在定义或提取数据之后但在设置图表属性之前执行此操作。

项目 #3：提取所有州的数据

不，您不必为所有州提取 hc-key 数据；只有你需要的，就像你在你的例子中所做的那样。

我已经用这些答案修改了你的fiddle：http://fiddle.jshell.net/brightmatrix/a65yufqf/4/

希望对您有所帮助！

高图：无法显示工具提示

highmap : not able to display tooltip

highcharts

highmaps