highmap：無法顯示工具提示

有人可以請指導我在下面的查詢請：highmap：無法顯示工具提示

1）我怎樣才能實現tootltip onhover狀態按照JSON。我確實嘗試過並創造了一個小提琴。

submissionDate：2017年5月20日， submissionResponseDate：2017年6月20日， stateResponse：批准

2）我要顯示狀態的顏色上JSON數據（已批准/認證待定）的基礎。

3）我是否需要對所有狀態ø通JSON爲「HC-鍵」作爲allAreas適當沒有顯示所有狀態

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

US Map

來源

2017-08-04 Anshul Agrawal

解決方案對於每個點

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/>' 

    } 
},

包含色彩

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>如您在樣本圖像顯示

2>準備JSON數據，你要默認的顏色其不在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示範

來源

2017-08-04 11:41:36

您可以使用Mike Zavarello提及的項目＃2。如果您無法修改JSON數據 –

Hi @Deep感謝您的關注。正如我們已經將Highcharts.maps ['countries/us/us-all-all作爲json，像RI，DC這樣的一些州。我們如何將這些狀態的名稱放在原型中顯示？該地圖也不包含美國地區。 2）是否可以提供數字以及圖例來說明每個狀態下有多少州例如批准/待決？ –

嗨檢查這個http://fiddle.jshell.net/yfpr9vL7/ –

項目＃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數據，所有國家拉動;只有你需要的那些，就像你在你的例子中所做的那樣。

我已經修改了你的擺弄着這些問題的答案：http://fiddle.jshell.net/brightmatrix/a65yufqf/4/

我希望這是對你有幫助！

來源

2017-08-04 11:48:01

highmap：無法顯示工具提示

回答

相關問題