我正在尝试使用向下钻取实现Stacked列，但我认为有一个错误，当我点击并返回到原始图表时，列变为“透明”，或者我做错了什么？
这是js：
http://jsfiddle.net/NULTY/410/
我正在使用3个类别：
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox','chrome'],
答案 0 :(得分：0)
看看这段代码，认为它可以帮到你。
http://jsfiddle.net/NULTY/753/
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
level = 0,
data = [{
y: 55.11,
color: colors[0],
drilldown: {
type: 'pie',
name: 'MSIE versions',
categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
level: 1,
data: [11,10.85, 7.35, 2.41],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
type: 'pie',
name: 'Firefox versions',
categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
data: [13.52, 5.43, 1.58, 0.83, 0.20],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
type: 'pie',
name: 'Chrome versions',
categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',
'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
type: 'pie',
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 41'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
type: 'pie',
name: 'Opera versions',
categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
data: [1.65, 0.37, 0.12],
color: colors[4]
}
}],
data2 = [{
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
data: [13.52, 5.43, 1.58, 0.83, 0.20],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',
'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 41'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
data: [1.65, 0.37, 0.12],
color: colors[4]
}
},{
y: 55.11,
color: colors[0],
drilldown: {
type: 'column',
name: 'MSIE versions',
categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
level: 1,
data: [11,10.85, 7.35, 2.41],
color: colors[0]
}
}];
function setChart(name, categories, data, color, level, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
chart.series[0].remove();
if(dataLen === 1){
chart.series[0].remove();
}
for(var i = 0; i< dataLen; i++){
chart.addSeries({
type: type,
name: name,
data: data[i],
level: level,
color: color || 'white'
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories, [data,data2], null, level, 'column');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
},
pie: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories, [data,data2], null, level, 'column');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point, s = '';
switch (this.series.options.level) {
case 0:
s = 'row 1 level 1 instructions<br/>';
s += ' row 2 level 1 instructions';
break;
case 1:
s = 'row 1 level 2 instructions <br/>';
s += ' row 2 level 2 instructions';
break;
case 2:
s = 'row 1 level 3 instructions<br/>';
s += 'row 2 level 3 instructions';
break;
}
return s;
}
},
series: [{
name: name+" 1",
level: level,
data: data,
color: 'white'
},{
name: name,
level: level,
data: data2,
color: 'white'
}],
exporting: {
enabled: false
}
});
});
答案 1 :(得分：0)
我为那些希望深入到列而不是段的人提出了一个程序化解决方案
HTML看起来像这样：
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<pre id="tsv" style="display:none">Root Message and Root Variant Root Variant Thumbs Up Root Variant No Rating Root Variant Thumbs Down
Canned A | Canned A 25.00% 45.00% 30.00%
Canned A | Canned A01 25.01% 44.99% 30.00%
Canned A | Canned A02 27.01% 42.99% 30.00%
Canned A | Canned A03 26.01% 43.99% 30.00%
Canned A | Canned A04 25.50% 42.50% 32.00%
Canned B | Canned B 41.00% 38.00% 21.00%
Canned B | Canned B01 41.01% 37.99% 21.00%
Canned B | Canned B02 38.01% 37.99% 24.00%
Canned B | Canned B03 43.01% 41.99% 15.00%
Canned C | Canned C 58.00% 36.00% 6.00%
Canned C | Canned C01 57.01% 35.99% 6.00%
Canned C | Canned C02 56.01% 35.99% 7.00%
Canned C | Canned C03 58.01% 36.99% 5.00%</pre>
Javascript看起来像这样：
var chart;
var premades = [],
premadesTU = [],
premadesNR = [],
premadesTD = [],
premadesTUData = [],
premadesNRData = [],
premadesTDData = [],
versions = [],
versionsTU = [],
versionsNR = [],
versionsTD = [];
var premadesCount = -1;
$(function () {
function setChart(categories, source) {
chart.xAxis[0].setCategories(categories);
chart.xAxis[0].setExtremes(0, 1);
while(chart.series.length > 0){
chart.series[0].remove(true);
}
if(source != null && source.series){
for(var i = 0; i < source.series.length; i ++ ){
chart.addSeries({
name: source.series[i].name,
data: source.series[i].data,
color: source.series[i].color || 'white',
tooltip: {
valueSuffix: ' %'
}
});
}
} else {
chart.addSeries({
name: 'Thumbs Up',
data: premadesTUData,
color: '#87b87f',
tooltip: { valueSuffix: ' %' }
});
chart.addSeries({
name: 'No Rating',
data: premadesNRData,
color: '#fee188',
tooltip: { valueSuffix: ' %' }
});
chart.addSeries({
name: 'Thumbs Down',
data: premadesTDData,
color: '#d15b47',
tooltip: { valueSuffix: ' %' }
});
}
}
Highcharts.data({
csv: document.getElementById('tsv').innerHTML,
itemDelimiter: '\t',
parsed: function (columns) {
// Parse percentage strings - Thumbs Up
columns[1] = $.map(columns[1], function (value) {
if (value.indexOf('%') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
// Parse percentage strings - No Rating
columns[2] = $.map(columns[2], function (value) {
if (value.indexOf('%') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
// Parse percentage strings - Thumbs Down
columns[3] = $.map(columns[3], function (value) {
if (value.indexOf('%') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
var previousPremade = '',
previousValues = [ 0, 0, 0 ],
previousCount = 0;
$.each(columns[0], function (i, name) {
var premade,
version;
// skip header row
if (i > 0) {
// Split into premade and version
premade = name.split(' | ')[0];
version = name.split(' | ')[1];
// Is it the same premade as previous row?
if (previousPremade === premade) {
previousValues[0] += columns[1][i];
previousValues[1] += columns[2][i];
previousValues[2] += columns[3][i];
previousCount++;
} else {
// No, different premade
if (previousPremade !== '') {
// add premade and values to premades array
var tu = Number((previousValues[0] / previousCount).toFixed(1));
var nr = Number((previousValues[1] / previousCount).toFixed(1));
var td = Number((previousValues[2] / previousCount).toFixed(1));
premadesTU[premadesCount].push(tu);
premadesNR[premadesCount].push(nr);
premadesTD[premadesCount].push(td);
// reset values
previousValues = [ 0, 0, 0 ];
previousCount = 0;
}
premadesCount++;
premades[premadesCount] = premade;
premadesTU[premadesCount] = [];
premadesNR[premadesCount] = [];
premadesTD[premadesCount] = [];
previousPremade = premade;
previousValues[0] += columns[1][i];
previousValues[1] += columns[2][i];
previousValues[2] += columns[3][i];
previousCount++;
}
// Create the version data
if (version !== null) {
if (!versions[premadesCount]) {
versions[premadesCount] = [];
versionsTU[premadesCount] = [];
versionsNR[premadesCount] = [];
versionsTD[premadesCount] = [];
}
versions[premadesCount].push(version);
versionsTU[premadesCount].push(columns[1][i]);
versionsNR[premadesCount].push(columns[2][i]);
versionsTD[premadesCount].push(columns[3][i]);
}
}
});
// add the last entry
// add premade and values to premades array
var tu = Number((previousValues[0] / previousCount).toFixed(1));
var nr = Number((previousValues[1] / previousCount).toFixed(1));
var td = Number((previousValues[2] / previousCount).toFixed(1));
premadesTU[premadesCount].push(tu);
premadesNR[premadesCount].push(nr);
premadesTD[premadesCount].push(td);
for (var i = 0; i <= premadesCount; i++) {
premadesTUData.push({
name: premades[i],
y: premadesTU[i][0],
color: '#87b87f',
drilldown: {
categories: versions[i],
series: [{
name: 'Thumbs Up',
data: versionsTU[i],
color: '#87b87f',
tooltip: { valueSuffix: ' %' }
},{
name: 'No Rating',
data: versionsNR[i],
color: '#fee188',
tooltip: { valueSuffix: ' %' }
},{
name: 'Thumbs Down',
data: versionsTD[i],
color: '#d15b47',
tooltip: { valueSuffix: ' %' }
}]
}
});
premadesNRData.push({
name: premades[i],
y: premadesNR[i][0],
color: '#fee188',
drilldown: {
categories: versions[i],
series: [{
name: 'Thumbs Up',
data: versionsTU[i],
color: '#87b87f',
tooltip: { valueSuffix: ' %' }
},{
name: 'No Rating',
data: versionsNR[i],
color: '#fee188',
tooltip: { valueSuffix: ' %' }
},{
name: 'Thumbs Down',
data: versionsTD[i],
color: '#d15b47',
tooltip: { valueSuffix: ' %' }
}]
}
});
premadesTDData.push({
name: premades[i],
y: premadesTD[i][0],
color: '#d15b47',
drilldown: {
categories: versions[i],
series: [{
name: 'Thumbs Up',
data: versionsTU[i],
color: '#87b87f',
tooltip: { valueSuffix: ' %' }
},{
name: 'No Rating',
data: versionsNR[i],
color: '#fee188',
tooltip: { valueSuffix: ' %' }
},{
name: 'Thumbs Down',
data: versionsTD[i],
color: '#d15b47',
tooltip: { valueSuffix: ' %' }
}]
}
});
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Premade Messages - Success'
},
subtitle: {
text: 'Click the columns to view versions.'
},
xAxis: {
categories: premades,
min: 0,
max: 1
},
scrollbar: {
enabled: true
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.categories, drilldown);
} else { // restore
setChart(premades, null);
}
}
}
},
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
credits: {
enabled: false
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>'
,
footerFormat: '</table>',
shared: true,
useHTML: true
},
series: [{
name: 'Thumbs Up',
data: premadesTUData,
color: '#87b87f',
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'Not Rated',
data: premadesNRData,
color: '#fee188',
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'Thumbs Down',
data: premadesTDData,
color: '#d15b47',
tooltip: {
valueSuffix: ' %'
}
}]
});
}
});
});
您可以在此处看到它：http://jsfiddle.net/limogesdotnet/3f6sff75/
希望这有帮助。