在切片中的父行上进行筛选时;子行(设置为图表上的行切片)没有更新。图表没有更改。下面是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
}]
}
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script src="https://code.highcharts.com/4.2.2/highcharts.js"></script>
<script src="https://code.highcharts.com/4.2.2/highcharts-more.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.highcharts.js"></script>
<table>
<tr style="width: 1000px;">
<div id="wdr-component"></div>
</tr>
<tr style="width: 1000px;">
<div id="highchartsContainer" style="width:500px;height:400px;"></div>
</tr>
</table>
我尝试过触发reportchange,也尝试过拦截createAndUpdateChartFunction中的数据,但都没有用。
1条答案
按热度按时间34gzjxbg1#
在提供的JavaScript代码中,
"Country"
字段不存在于传递给getData
方法的切片中。过滤国家不会影响图表,因为此字段不会传递给图表的数据。将"Country"
添加到行将有助于实现所需的行为: