过滤切片中的父行时;子行(设置为图表上的行切片)未更新。图表没有变化。下面是 JavaScript 代码。
如果您在国家/地区过滤数据透视表,图表不会改变,即使它应该改变,因为后续类别也应该被过滤。
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
width: 850,
report: {
"dataSource": {
"dataSourceType": "json",
"data": getJSONData()
},
slice: {
rows: [{
uniqueName: "Country"
},{
uniqueName: "Category"
}],
columns: [{
uniqueName: "Measures"
}],
measures: [{
uniqueName: "Price",
format:"currency"
}]
},
options: {
grid: {
type: "classic"
}
},
formats: [
{
name: "currency",
thousandsSeparator: " ",
decimalSeparator: ".",
decimalPlaces: 2,
maxDecimalPlaces: -1,
maxSymbols: 20,
currencySymbol: "$",
currencySymbolAlign: "left",
nullValue: "",
infinityValue: "Infinity",
divideByZeroValue: "Infinity",
textAlign: "right",
isPercent: false
}
]
},
reportcomplete: function() {
pivot.off("reportcomplete");
pivot.expandAllData();
createChart();
},
reportchange: function() {
pivot.off("reportchange")
}
});
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
function createChart() {
pivot.highcharts.getData({
type: "bar",
slice: {
rows: [{
uniqueName: "Category"
}],
columns: [{
uniqueName: "Measures"
}],
measures: [{
uniqueName: "Price",
format:"currency"
}]
}
}, createAndUpdateChart, createAndUpdateChart);
}
function createAndUpdateChart(data, rawData) {
if (data.yAxis == undefined) data.yAxis = {};
// apply the number formatting from the pivot table to the tooltip
data.tooltip = {
pointFormat: pivot.highcharts.getPointYFormat(rawData.meta.formats[0])
}
Highcharts.chart('highchartsContainer', data);
}
Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
'#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle:{
color: 'gray'
}
}
};
function getJSONData() {
return [{
"Country": "Australia",
"Category": "Wood",
"Price": 445,
"Revenue": 464
}, {
"Country": "Australia",
"Category": "Bikes",
"Price": 125,
"Revenue": 440
}, {
"Country": "China",
"Category": "Clothing",
"Price": 190,
"Revenue": 310
}, {
"Country": "United States",
"Category": "Aircraft",
"Price": 406,
"Revenue": 127
}, {
"Country": "United States",
"Category": "Bikes",
"Price": 85,
"Revenue": 821
}, {
"Country": "United Kingdom",
"Category": "Cars",
"Price": 21,
"Revenue": 455
}, {
"Country": "Canada",
"Category": "Clothing",
"Price": 666,
"Revenue": 685
}, {
"Country": "Germany",
"Category": "Cars",
"Price": 563,
"Revenue": 742
}, {
"Country": "United Kingdom",
"Category": "Bikes",
"Price": 397,
"Revenue": 340
}, {
"Country": "Germany",
"Category": "Clothing",
"Price": 800,
"Revenue": 948
}, {
"Country": "Germany",
"Category": "Cars",
"Price": 172,
"Revenue": 800
}, {
"Country": "Canada",
"Category": "Aircraft",
"Price": 352,
"Revenue": 947
}, {
"Country": "United Kingdom",
"Category": "Aircraft",
"Price": 540,
"Revenue": 328
}, {
"Country": "United Kingdom",
"Category": "Aircraft",
"Price": 204,
"Revenue": 216
}, {
"Country": "Germany",
"Category": "Clothing",
"Price": 292,
"Revenue": 644
}, {
"Country": "Canada",
"Category": "Aircraft",
"Price": 901,
"Revenue": 237
}, {
"Country": "Canada",
"Category": "Wood",
"Price": 348
}, {
"Country": "Canada",
"Category": "Clothing",
"Price": 725,
"Revenue": 335
}, {
"Country": "Canada",
"Category": "Clothing",
"Price": 13,
"Revenue": 687
}, {
"Country": "China",
"Category": "Wood",
"Price": 62,
"Revenue": 378
}]
}
我尝试触发 reportchange 并尝试拦截 createAndUpdateChartFunction 中的数据,但无济于事。