Question

有人可以请指导我以下问题：

1）我如何根据json实现tootltip onhover on state。我确实试过并创造了一个小提琴。

submissionDate：2017年5月20日， submissionResponseDate：二零一七年六月二十日， stateResponse：批准

2）我想根据Json数据显示状态颜色（批准/批准待定）。

3）我是否需要为所有状态传递json为“hc-key”，因为allAreas本身没有显示所有状态

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

US Map

Answer 1

解决方案对于每个点

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

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＆gt;准备包含颜色的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＆gt;正如您在示例图片中所示，您需要不在JSON中的默认颜色。为此，您必须使用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语句...而不是显示空值（如您在示例中为Oregon所示），这将显示对用户更有帮助的值。

项目＃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数据;只有你需要的那些，正如你在你的例子中所做的那样。

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

我希望这对你有所帮助！

highmap：无法显示工具提示

2 个答案: