我无法弄清楚为什么国会选区的hc-key不能或没有正确关联。我已经尝试过几乎每一个Highmaps和Highcharts join的变体都可以。我也看了Stack上的每一个答案。
我们使用电子表格处理状态没有问题，但这对我们来说并不合适。
我将包含小提琴链接，但这是代码。我甚至会留下注释掉的代码，这样你就可以看到我做出的尝试对我来说没有成功。此外，我们必须调整Highmaps提供的区域来更新它们，因此如果您尝试复制它们，请考虑路径。
非常感谢任何帮助！
jQuery(document).ready(function($) {
Highcharts.data({
// https://docs.google.com/spreadsheets/d/1Z0oRIsToDT0MnlP2pfBvSN3fd-lW8nIzxTpq_fdxPDM/pubhtml
googleSpreadsheetKey: '1Z0oRIsToDT0MnlP2pfBvSN3fd-lW8nIzxTpq_fdxPDM',
// custom handler when the spreadsheet is parsed
parsed: function(columns) {
// Read the columns into the data array
var data = [];
function pointClick() {
var row = this.options.row,
district = this.district,
incumbent = this.incumbent,
$div = $('<div></div>')
.dialog({
title: function() {
$(this).closest("span.ui-dialog-title")
.html('<span class="state-title"></span><h2 class="state-text">' + district + ' ' + incumbent + '</h2>');
},
open: function() {
$(this).closest(".ui-dialog")
.find(".ui-button-text-only")
.removeClass(".ui-button-text-only")
.addClass("ui-button-icon-only")
.html("<span class='ui-button-icon ui-icon ui-icon-closethick'></span>");
},
width: 740,
height: 740
});
window.chart = new Highcharts.Chart($div[0], {
credits: {
href: 'https://www.peoplespunditdaily.com/',
text: 'People‘s Pundit Daily'
},
title: {
text: 'Election Projection Data'
},
subtitle: {
text: 'Recent Election Results'
},
/*tooltip: {
useHTML: true,
headerFormat: '<span style="font-size:12px">{series.name}</span><hr class="style-two">',
pointFormat: '{point.name}: <b>{point.percentage:.1f}% to {point.challengerVote}</b>'
},*/
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: 10,
style: {
fontWeight: 'bold',
color: 'black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: '2016 House Results',
innerSize: '50%',
data: [{
name: 'Incumbent Vote',
color: '#006aab',
y: parseFloat(columns[incumbentVote][row], 10)
}, {
name: 'Challenger Vote',
color: '#b02029',
y: parseFloat(columns[challengerVote][row], 10)
}],
dataLabels: {
enabled: true,
},
cursor: 'pointer',
showInLegend: false,
center: [160, 100],
size: 120
}, {
type: 'pie',
name: '2016 Presidential Vote',
innerSize: '50%',
data: [{
name: 'Trump Vote Share',
color: '#b02029',
y: parseFloat(columns[trump][row], 10)
}, {
name: 'Clinton Vote Share',
color: '#006aab',
y: parseFloat(columns[clinton][row], 10)
}],
cursor: 'pointer',
showInLegend: false,
center: [500, 100],
size: 120
}, {
type: 'pie',
name: '2012 Presidential Vote',
innerSize: '50%',
data: [{
name: 'Obama Vote Share',
color: '#006aab',
y: parseFloat(columns[obama][row], 10)
}, {
name: 'Romney Vote Share',
color: '#b02029',
y: parseFloat(columns[romney][row], 10)
}],
cursor: 'pointer',
showInLegend: false,
center: [160, 300],
size: 120
}]
});
}
options = {
chart: {
renderTo: 'container',
backgroundColor: null
},
credits: {
enabled: false
},
title: {
style: {
textShadow: '0 0.032em 0 #999, 0px 0.15em 0.11em rgba(0,0,0,0.15), 0px 0.25em 0.021em rgba(0,0,0,0.1), 0px 0.32em 0.32em rgba(0,0,0,0.1)',
color: '#020202'
},
text: '2016 House of Representatives Battleground District Map'
},
subtitle: {
style: {
color: '#1d1c1d'
},
text: 'Source: PPD Election Projection Model'
},
legend: {
layout: 'vertical',
align: 'right',
navigation: {
enabled: true
},
verticalAlign: 'bottom'
},
mapNavigation: {
enabled: false
},
colorAxis: {
dataClasses: [{
from: -100,
to: -75,
color: '#006aab',
name: 'Democrat'
}, {
from: -75,
to: -50,
color: '#6193c7',
name: 'Likely Democrat'
}, {
from: -50,
to: -25,
color: '#9cc0e3',
name: 'Leans Democrat'
}, {
from: -25,
to: -10,
color: '#ceeafd',
name: 'Trump District Leans Democrat'
}, {
from: -10,
to: 10,
color: '#C39BD3',
name: 'Battleground'
}, {
from: 10,
to: 25,
color: '#fbd0d0',
name: 'Clinton District Leans Republican'
}, {
from: 25,
to: 50,
color: '#e99d98',
name: 'Leans Republican'
}, {
from: 50,
to: 75,
color: '#cf635d',
name: 'Likely Republican'
}, {
from: 75,
to: 100,
color: '#b02029',
name: 'Republican'
}]
},
tooltip: {
useHTML: true,
borderWidth: 2,
backgroundColor: {
linearGradient: [0, 0, 0, 60],
stops: [
[0, '#F6F5F4'],
[1, '#FFFFFF']
]
},
headerFormat: '<span style="font-size:20px">{point.district}</span><hr class="style-two">',
pointFormat: '<span style="font-size:16px;">Rating: <b style="color:{point.color}">{point.rating}</b></span><br/><br/>',
footerFormat: '<span style="font-size:12px">Click State for District Data</span><br/>'
},
series: [{
animation: true,
data: data,
mapData: Highcharts.maps['maps/us-115-congress'],
joinBy: 'hc-key',
states: {hover: {color: '#BADA55'}},
point: {events: {click: pointClick}},
dataLabels: {enabled: false},
cursor: 'pointer'
}]
};
$.each(columns[0], function(i, key) {
data.push({
'hc-key': key,
value: parseFloat(columns[1][i]),
district: columns[2][i],
incumbent: columns[3][i],
incumbentVote: columns[4][i],
challengerVote: columns[5][i],
trump: columns[6][i],
clinton: columns[7][i],
obama: columns[8][i],
romney: columns[9][i],
row: i
});
});
// Initiate the chart
window.chart = new Highcharts.Map(options);
}
});
});
这是jsfiddle链接：https://jsfiddle.net/Peoples_Pundit/fz37sar7/
答案 0 :(得分：0)
老实说，我确切地不知道我改变了什么，但是我通过手动var = []方法添加数据后最后一次尝试了。
我们总是将数据添加到Google Spreadsheets的地图，图表和表格中，我们将永远手动添加。
我确实用“key”替换了“code”将所有数据定义为自己的变量。您会注意到许多其他功能，但它与上面的项目相同。
这是新更新的代码（注意：方法需要highcharts-data.js，仪表需要highcharts-more.js）：
jQuery(document).ready(function($) {
Highcharts.data({
//https://docs.google.com/spreadsheets/d/1Z0oRIsToDT0MnlP2pfBvSN3fd-lW8nIzxTpq_fdxPDM/pubhtm
googleSpreadsheetKey: '1Z0oRIsToDT0MnlP2pfBvSN3fd-lW8nIzxTpq_fdxPDM',
// custom handler when the spreadsheet is parsed
parsed: function(columns) {
// Read the columns into the data array
var data = [];
var change = {
'-100': 'Dem',
'-75': 'Likely',
'-50': 'Leans',
'-25': 'Slightly',
'0': 'Toss',
'25': 'Slightly',
'50': 'Leans',
'75': 'Likely',
'100': 'GOP'
};
// Create the chart
function pointClick() {
// Holds var for each row, assign to = this.options row = this.options.row,
var
value = this.value,
district = this.district,
incumbent = this.incumbent,
democratVote2016 = this.democratVote2016,
republicanVote2016 = this.republicanVote2016,
democratVote2018 = this.democratVote2018,
republicanVote2018 = this.republicanVote2018,
trump = this.trump,
clinton = this.clinton,
obama = this.obama,
romney = this.romney,
rating = this.rating,
$div = $('<div></div>')
.dialog({
title: function() {
$(this).closest("span.ui-dialog-title")
.html('<h2 class="state-text">' + district + '</h2>');
},
open: function() {
$(this).closest(".ui-dialog")
.find(".ui-button-text-only")
.removeClass(".ui-button-text-only")
.addClass("ui-button-icon-only")
.html("<span class='ui-button-icon ui-icon ui-icon-closethick'></span>");
},
width: 740,
height: 740
});
window.chart = new Highcharts.Chart($div[0], {
credits: {
href: 'https://www.peoplespunditdaily.com/',
text: 'People‘s Pundit Daily'
},
title: {
text: 'Election Projection Data'
},
subtitle: {
text: ''
},
tooltip: {
useHTML: true,
valueSuffix: '%',
headerFormat: '<span style="font-size:12px">{series.name}</span><hr class="style-two">',
pointFormat: '<span style="color:{point.color}">\u25CF</span> {point.name}: <b>{point.y}</b><br/>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: 10,
useHTML: true,
style: {
fontWeight: 'bold',
color: 'black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
},
gauge: {
dataLabels: {
enabled: true,
useHTML: true,
format: '{point.name}'
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {point.name}: <b>' + rating + '</b><br/>'
},
dial: {
radius: '110%',
backgroundColor: "{this.color}"
}
}
},
yAxis: {
min: -100,
max: 100,
minorTickLength: 10,
tickLength: 20,
cursor: 'pointer',
labels: {
enable: true,
useHTML: true,
align: 'center',
reserveSpace: false,
rotation: 'auto',
formatter: function() {
var value = change[this.value];
return value !== 'undefined' ? value : this.value;
}
},
plotBands: [{
from: -100,
to: -75,
color: '#006aab'
}, {
from: -75,
to: -50,
color: '#6193c7'
}, {
from: -50,
to: -25,
color: '#9cc0e3'
}, {
from: -25,
to: -10,
color: '#ceeafd'
}, {
from: -10,
to: 10,
color: '#C39BD3'
}, {
from: 10,
to: 25,
color: '#fbd0d0'
}, {
from: 25,
to: 50,
color: '#e99d98'
}, {
from: 50,
to: 75,
color: '#cf635d'
}, {
from: 75,
to: 100,
color: '#b02029'
}]
},
pane: {
startAngle: -90,
endAngle: 90,
center: ['50%', '90%'],
size: 400,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
series: [{
type: 'pie',
name: '2016 House Results',
innerSize: '50%',
data: [{
name: 'Democrat Vote',
color: '#006aab',
y: parseFloat([democratVote2016], 10)
}, {
name: 'Republican Vote',
color: '#b02029',
y: parseFloat([republicanVote2016], 10)
}],
cursor: 'pointer',
showInLegend: false,
center: ['25%', '20%'],
size: 150
}, {
type: 'pie',
name: '2014 House Results',
innerSize: '50%',
data: [{
name: 'Democrat Vote',
color: '#006aab',
y: parseFloat([democratVote2018], 10)
}, {
name: 'Republican Vote',
color: '#b02029',
y: parseFloat([republicanVote2018], 10)
}],
cursor: 'pointer',
showInLegend: false,
center: ['75%', '20%'],
size: 150
}, {
type: 'pie',
name: '2016 Presidential Vote',
innerSize: '50%',
data: [{
name: 'Trump Vote',
color: '#b02029',
y: parseFloat([trump], 10)
}, {
name: 'Clinton Vote',
color: '#006aab',
y: parseFloat([clinton], 10)
}],
cursor: 'pointer',
showInLegend: false,
center: ['25%', '45%'],
size: 150
}, {
type: 'pie',
name: '2012 Presidential Vote',
innerSize: '50%',
data: [{
name: 'Obama Vote',
color: '#006aab',
y: parseFloat([obama], 10)
}, {
name: 'Romney Vote',
color: '#b02029',
y: parseFloat([romney], 10)
}],
cursor: 'pointer',
showInLegend: false,
center: ['75%', '45%'],
size: 150
}, {
type: 'gauge',
name: 'Election Projection',
data: [{
name: 'Rating',
y: parseFloat([value], 10)
}],
showInLegend: false
}]
});
}
options = {
chart: {
renderTo: 'container',
backgroundColor: null
},
credits: {
enabled: false
},
title: {
style: {
textShadow: '0 0.032em 0 #999, 0px 0.15em 0.11em rgba(0,0,0,0.15), 0px 0.25em 0.021em rgba(0,0,0,0.1), 0px 0.32em 0.32em rgba(0,0,0,0.1)',
color: '#020202'
},
text: '2016 House of Representatives Battleground District Map'
},
subtitle: {
style: {
color: '#1d1c1d'
},
text: 'Source: PPD Election Projection Model'
},
legend: {
layout: 'vertical',
align: 'right',
navigation: {
enabled: true
},
verticalAlign: 'bottom'
},
mapNavigation: {
enabled: true
},
colorAxis: {
dataClasses: [{
from: -100,
to: -75,
color: '#006aab',
name: 'Democrat'
}, {
from: -75,
to: -50,
color: '#6193c7',
name: 'Likely Democrat'
}, {
from: -50,
to: -25,
color: '#9cc0e3',
name: 'Leans Democrat'
}, {
from: -25,
to: -10,
color: '#ceeafd',
name: 'Slightly Democrat'
}, {
from: -10,
to: 10,
color: '#C39BD3',
name: 'Battleground'
}, {
from: 10,
to: 25,
color: '#fbd0d0',
name: 'Slightly Republican'
}, {
from: 25,
to: 50,
color: '#e99d98',
name: 'Leans Republican'
}, {
from: 50,
to: 75,
color: '#cf635d',
name: 'Likely Republican'
}, {
from: 75,
to: 100,
color: '#b02029',
name: 'Republican'
}]
},
tooltip: {
useHTML: true,
borderWidth: 2,
backgroundColor: {
linearGradient: [0, 0, 0, 60],
stops: [
[0, '#F6F5F4'],
[1, '#FFFFFF']
]
},
headerFormat: '<span style="font-size:16px;"><b></b></span><hr class="style-two">',
pointFormat: '<span style="font-size:12px;"><b>District: {point.district}</b><br/>Incumbent: {point.incumbent}<br/>Rating: <b style="color:{point.color}">{point.rating}</b></span><br/><br/>',
footerFormat: '<span style="font-size:10px">Click State for District Data</span><br/>'
},
series: [{
animation: true,
data: data,
mapData: Highcharts.maps['maps/us-115-congress'],
joinBy: 'hc-key',
name: 'PPD Election Projection',
states: {
hover: {
color: null,
brightness: 0,
borderColor: '#1d1c1d',
borderWidth: 2
}
},
point: {
events: {
click: pointClick
}
},
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '{point.name}'
}
}]
};
$.each(columns[0], function(i, key) {
data.push({
'hc-key': key,
value: columns[1][i],
district: columns[2][i],
incumbent: columns[3][i],
democratVote2016: columns[4][i],
republicanVote2016: columns[5][i],
democratVote2018: columns[6][i],
republicanVote2018: columns[7][i],
trump: columns[8][i],
clinton: columns[9][i],
obama: columns[10][i],
romney: columns[11][i],
rating: columns[12][i],
row: i
});
});
// Initiate the chart
window.chart = new Highcharts.Map(options);
}
});
});
中提琴！不确定是否更快地定义并将所有这些变量再次放在上面，或者只是使用它们来拉动它们：
y: parseFloat(columns[15][row], 10)
但它有效并且看起来很棒。