数据未显示在 Highcharts 中
Data Not Showing in Highcharts
我正在尝试结合 Highcharts 中的几个不同图表演示。
我的例子是：Data classes and popup and Small US with data labels
我想要第一个具有第二个弹出功能的地图。我需要将地图连接到我自己的 google 电子表格，但现在我只是想让第一个示例中的数据起作用。
这是我目前所拥有的，但似乎无法在地图中获取任何数据。我以为我遇到了 joinBy 问题，我可能仍然如此，但是当我将 joinBy 设置为 null 时，我以为 "the map items are joined by their position in the array"，但什么也没有发生。
https://jsfiddle.net/9eq6mydv/
$(function () {
// Load the data from a Google Spreadsheet
// https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html
Highcharts.data({
googleSpreadsheetKey: '0AoIaUO7wH1HwdDFXSlpjN2J4aGg5MkVHWVhsYmtyVWc',
googleSpreadsheetWorksheet: 1,
// custom handler for columns
parsed: function (columns) {
// Make the columns easier to read
var keys = columns[0],
names = columns[1],
percent = columns[10],
// Initiate the chart
options = {
chart : {
renderTo: 'container',
type: 'map',
borderWidth : 1
},
title : {
text : 'US presidential election 2008 result'
},
subtitle: {
text: 'Source: <a href="http://en.wikipedia.org/wiki/United_States_presidential_election,' +
'_2008#Election_results">Wikipedia</a>'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
legend: {
align: 'right',
verticalAlign: 'top',
x: -100,
y: 70,
floating: true,
layout: 'vertical',
valueDecimals: 0,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)'
},
colorAxis: {
dataClasses: [{
from: -100,
to: 0,
color: '#C40401',
name: 'McCain'
}, {
from: 0,
to: 100,
color: '#0200D0',
name: 'Obama'
}]
},
series : [{
data : data,
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}',
style: {
textTransform: 'uppercase'
}
},
mapData: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']),
joinBy: keys,
name: 'Democrats margin',
point: {
events: {
click: pointClick
}
},
tooltip: {
ySuffix: ' %'
},
cursor: 'pointer'
}, {
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
color: 'silver'
}]
};
/**
* Event handler for clicking points. Use jQuery UI to pop up
* a pie chart showing the details for each state.
*/
function pointClick() {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: this.name,
width: 400,
height: 300
});
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'Obama',
color: '#0200D0',
y: parseInt(columns[3][row], 10)
}, {
name: 'McCain',
color: '#C40401',
y: parseInt(columns[4][row], 10)
}],
dataLabels: {
format: '<b>{point.name}</b> {point.percentage:.1f}%'
}
}]
});
}
// Read the columns into the data array
var data = [];
$.each(keys, function (i, key) {
data.push({
key: key,//.toUpperCase(),
value: parseFloat(percent[i]),
name: names,
row: i
});
});
// Initiate the chart
window.chart = new Highcharts.Map(options);
},
error: function () {
$('#container').html('<div class="loading">' +
'<i class="icon-frown icon-large"></i> ' +
'Error loading data from Google Spreadsheets' +
'</div>');
}
});
});
更新：
我想和大家分享我最终的解决方案。尽管 Ondkloss 出色地回答了我的问题，但弹出功能仍然不起作用，这是因为我忘记为 .dialog 调用包含 jQuery。一旦我包括我有一个带有 highchart error 17, this is because the highmaps.js code doesn't include the pie chart class. So I had to add the highcharts.js code and include map.js module afterward. You can see my final jsfiddle here.
的空弹出窗口
再次感谢 Ondkloss 的出色回答！
这里的问题主要归结为 joinBy 的使用。另外要更正它，需要对 data 和 mapData.
进行一些更改
目前您的 joinBy 是一个字符串数组，例如 ["al", "ak", ...]。这根本不是 joinBy 选项的可接受格式。您可以阅读 the API documentation 中的详细信息，但最简单的方法是在 data 和 mapData 中有一个共同的属性，然后在 joinBy 中提供一个字符串，然后通过该属性连接这两个数组。例如：
series : [{
data : data,
mapData: mapData,
joinBy: "hc-key",
]
此处 "hc-key" 属性必须存在于 data 和 mapData 中。
以下是我在您的代码中创建 data 变量的方法：
var data = [];
$.each(keys, function (i, key) {
if(i != 0)
data.push({
"hc-key": "us-"+key,
code: key.toUpperCase(),
value: parseFloat(percent[i]),
name: names[i],
row: i
});
});
这将跳过第一个键，即 "Key"（列的标题）。在这里，我们使 "hc-key" 适合地图数据中 "hc-key" 的格式。例如 "us-al"。其余只是将加入的元数据。请注意，您在用数据填充之前在选项中引用了您的数据，因此必须在此之前移动它。
这就是我在您的代码中创建 mapData 变量的方式：
var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);
// Process mapdata
$.each(mapData, function () {
var path = this.path,
copy = { path: path };
// This point has a square legend to the right
if (path[1] === 9727) {
// Identify the box
Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);
// Place the center of the data label in the center of the point legend box
this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);
}
// Tag it for joining
this.ucName = this.name.toUpperCase();
});
第一部分是你的"standard map data"。剩下的就是正确居中弹出状态的标签，并直接从示例中获得。
瞧，请参阅 this JSFiddle demonstration 以见证您的地图的实际应用。
我建议做一些 console.log-ing 以查看 data 和 mapData 如何具有共同的 hc-key 并导致数据在系列。
我正在尝试结合 Highcharts 中的几个不同图表演示。
我的例子是：Data classes and popup and Small US with data labels
我想要第一个具有第二个弹出功能的地图。我需要将地图连接到我自己的 google 电子表格，但现在我只是想让第一个示例中的数据起作用。
这是我目前所拥有的，但似乎无法在地图中获取任何数据。我以为我遇到了 joinBy 问题，我可能仍然如此，但是当我将 joinBy 设置为 null 时，我以为 "the map items are joined by their position in the array"，但什么也没有发生。
https://jsfiddle.net/9eq6mydv/
$(function () {
// Load the data from a Google Spreadsheet
// https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html
Highcharts.data({
googleSpreadsheetKey: '0AoIaUO7wH1HwdDFXSlpjN2J4aGg5MkVHWVhsYmtyVWc',
googleSpreadsheetWorksheet: 1,
// custom handler for columns
parsed: function (columns) {
// Make the columns easier to read
var keys = columns[0],
names = columns[1],
percent = columns[10],
// Initiate the chart
options = {
chart : {
renderTo: 'container',
type: 'map',
borderWidth : 1
},
title : {
text : 'US presidential election 2008 result'
},
subtitle: {
text: 'Source: <a href="http://en.wikipedia.org/wiki/United_States_presidential_election,' +
'_2008#Election_results">Wikipedia</a>'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
legend: {
align: 'right',
verticalAlign: 'top',
x: -100,
y: 70,
floating: true,
layout: 'vertical',
valueDecimals: 0,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)'
},
colorAxis: {
dataClasses: [{
from: -100,
to: 0,
color: '#C40401',
name: 'McCain'
}, {
from: 0,
to: 100,
color: '#0200D0',
name: 'Obama'
}]
},
series : [{
data : data,
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}',
style: {
textTransform: 'uppercase'
}
},
mapData: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']),
joinBy: keys,
name: 'Democrats margin',
point: {
events: {
click: pointClick
}
},
tooltip: {
ySuffix: ' %'
},
cursor: 'pointer'
}, {
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
color: 'silver'
}]
};
/**
* Event handler for clicking points. Use jQuery UI to pop up
* a pie chart showing the details for each state.
*/
function pointClick() {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: this.name,
width: 400,
height: 300
});
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'Obama',
color: '#0200D0',
y: parseInt(columns[3][row], 10)
}, {
name: 'McCain',
color: '#C40401',
y: parseInt(columns[4][row], 10)
}],
dataLabels: {
format: '<b>{point.name}</b> {point.percentage:.1f}%'
}
}]
});
}
// Read the columns into the data array
var data = [];
$.each(keys, function (i, key) {
data.push({
key: key,//.toUpperCase(),
value: parseFloat(percent[i]),
name: names,
row: i
});
});
// Initiate the chart
window.chart = new Highcharts.Map(options);
},
error: function () {
$('#container').html('<div class="loading">' +
'<i class="icon-frown icon-large"></i> ' +
'Error loading data from Google Spreadsheets' +
'</div>');
}
});
});
更新：
我想和大家分享我最终的解决方案。尽管 Ondkloss 出色地回答了我的问题，但弹出功能仍然不起作用，这是因为我忘记为 .dialog 调用包含 jQuery。一旦我包括我有一个带有 highchart error 17, this is because the highmaps.js code doesn't include the pie chart class. So I had to add the highcharts.js code and include map.js module afterward. You can see my final jsfiddle here.
再次感谢 Ondkloss 的出色回答！
这里的问题主要归结为 joinBy 的使用。另外要更正它，需要对 data 和 mapData.
目前您的 joinBy 是一个字符串数组，例如 ["al", "ak", ...]。这根本不是 joinBy 选项的可接受格式。您可以阅读 the API documentation 中的详细信息，但最简单的方法是在 data 和 mapData 中有一个共同的属性，然后在 joinBy 中提供一个字符串，然后通过该属性连接这两个数组。例如：
series : [{
data : data,
mapData: mapData,
joinBy: "hc-key",
]
此处 "hc-key" 属性必须存在于 data 和 mapData 中。
以下是我在您的代码中创建 data 变量的方法：
var data = [];
$.each(keys, function (i, key) {
if(i != 0)
data.push({
"hc-key": "us-"+key,
code: key.toUpperCase(),
value: parseFloat(percent[i]),
name: names[i],
row: i
});
});
这将跳过第一个键，即 "Key"（列的标题）。在这里，我们使 "hc-key" 适合地图数据中 "hc-key" 的格式。例如 "us-al"。其余只是将加入的元数据。请注意，您在用数据填充之前在选项中引用了您的数据，因此必须在此之前移动它。
这就是我在您的代码中创建 mapData 变量的方式：
var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);
// Process mapdata
$.each(mapData, function () {
var path = this.path,
copy = { path: path };
// This point has a square legend to the right
if (path[1] === 9727) {
// Identify the box
Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);
// Place the center of the data label in the center of the point legend box
this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);
}
// Tag it for joining
this.ucName = this.name.toUpperCase();
});
第一部分是你的"standard map data"。剩下的就是正确居中弹出状态的标签，并直接从示例中获得。
瞧，请参阅 this JSFiddle demonstration 以见证您的地图的实际应用。
我建议做一些 console.log-ing 以查看 data 和 mapData 如何具有共同的 hc-key 并导致数据在系列。