我使用HighCharts创建图表，并从官方网站I havesomething exactly like this jsfidle复制一些示例如何在同一页面上添加另一个包含不同数据的图表？
我正在谷歌和这里寻找一些例子，但找不到与我的例子匹配的东西。
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
data = [{
y: 56.33,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
color: colors[0]
}
}, {
y: 10.38,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
color: colors[1]
}
}, {
y: 24.03,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'
],
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
color: colors[2]
}
}, {
y: 4.77,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
color: colors[3]
}
}, {
y: 0.91,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
data: [0.34, 0.17, 0.24, 0.16],
color: colors[4]
}
}, {
y: 0.2,
color: colors[5],
drilldown: {
name: 'Proprietary or Undetectable',
categories: [],
data: [],
color: colors[5]
}
}],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, January, 2015 to May, 2015'
},
subtitle: {
text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
}）;
答案 0 :(得分：1)
通过设置第二个容器并添加3个新数组：Data2，browserData2和versionsData2，不要忘记将最后两个数组（browserData2和versionsData2）添加到第二个容器中的series选项中：
series: [{
name: 'Browsers',
data: browserData2,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Versions',
data: versionsData2,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
请检查以下示例（jsfiddle）：
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
data = [{
y: 56.33,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
color: colors[0]
}
}, {
y: 10.38,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
color: colors[1]
}
}, {
y: 24.03,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'
],
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
color: colors[2]
}
}, {
y: 4.77,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
color: colors[3]
}
}, {
y: 0.91,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
data: [0.34, 0.17, 0.24, 0.16],
color: colors[4]
}
}, {
y: 0.2,
color: colors[5],
drilldown: {
name: 'Proprietary or Undetectable',
categories: [],
data: [],
color: colors[5]
}
}],
categories2 = ['A', 'B', 'C', 'D', 'E'],
data2 = [{
y: 56.33,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
color: colors[0]
}
}, {
y: 10.38,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['F7', 'F6', 'F5', 'F4', 'F3', 'F2', 'F1'],
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
color: colors[1]
}
}, {
y: 24.03,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Cn', 'Cm', 'Cj', 'Ct', 'Cb',
'Cc', 'Cf', 'Cy', 'Ct', 'Cr', 'Cr', 'Ce', 'Cw', 'Cq'
],
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
color: colors[2]
}
}, {
y: 4.77,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['S7', 'S6', 'S5', 'S4', 'S3', 'S2', 'S1'],
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
color: colors[3]
}
}, {
y: 0.91,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['O1', 'O2', 'O3', 'O4'],
data: [0.34, 0.17, 0.24, 0.16],
color: colors[4]
}
}, {
y: 0.2,
color: colors[5],
drilldown: {
name: 'Proprietary or Undetectable',
categories: [],
data: [],
color: colors[5]
}
}],
browserData = [],
versionsData = [],
browserData2 = [],
versionsData2 = [],
i,
j,
dataLen = data.length,
dataLen2 = data2.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Build the data arrays
for (i = 0; i < dataLen2; i += 1) {
// add browser data
browserData2.push({
name: categories2[i],
y: data2[i].y,
color: data2[i].color
});
// add version data
drillDataLen = data2[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData2.push({
name: data2[i].drilldown.categories[j],
y: data2[i].drilldown.data[j],
color: Highcharts.Color(data2[i].color).brighten(brightness).get()
});
}
}
// Create the chart
$('#container2').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, January, 2015 to May, 2015'
},
subtitle: {
text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Second Chart'
},
subtitle: {
text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData2,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Versions',
data: versionsData2,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
});
答案 1 :(得分：0)
如果您需要3个图表，可以复制粘贴初始化，只需更改数据和容器名称。
或者您可以创建一个函数，按给定的数据和容器名称填充图表。像这样：
function populateChart(renderTo,data,title) {
var chart = new Highcharts.Chart({
chart: {
renderTo: renderTo,
type: 'column'
},
title: {
text: title
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
series: [{
name: 'John',
data: data,
stack: 'male'
}]
});
}
然后在需要时调用它：
$(function(){
populateChart('container1',[5, 3, 4, 7, 2],'Title 1');
populateChart('container2',[3, 4, 4, 2, 5],'Title 2');
populateChart('container3',[2, 5, 6, 2, 1],'Title 3');
});
您可以查看我的example