WebDataRocks过滤父行时Highcharts图表数据不更新问题求助

问题描述 #

在WebDataRocks切片中对父行（Country）进行过滤时，作为图表行切片的子行（Category）数据未更新，图表无变化。即使对数据透视表按Country过滤，后续Category应同步过滤，但图表未改变。

原因分析 #

1. 原代码中reportchange事件被立即解绑（pivot.off("reportchange")），导致透视表数据变化时无法触发图表更新。
2. 图表的slice是硬编码的独立结构，没有继承透视表当前的过滤条件，每次获取数据时都是基于原始全量数据生成，不会响应透视表的过滤操作。

解决方案 #

• 保留reportchange事件绑定，在事件回调中重新调用图表生成函数，实现数据变化时自动更新图表。
• 图表的slice基于透视表当前的配置生成，只修改需要的维度（这里只保留Category作为行），自动继承透视表的过滤、筛选等条件。

修改后的完整代码 #

HTML代码 #

<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>

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() {
        // 透视表数据变化时重新生成图表
        createChart();
    }
});

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

function createChart() {
    // 获取当前透视表的slice配置，仅修改rows为Category，继承过滤条件
    const currentSlice = pivot.getReport().slice;
    pivot.highcharts.getData({
        type: "bar",
        slice: {
            ...currentSlice,
            rows: [{
                uniqueName: "Category"
            }]
        }
    }, 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
    }]
}

内容的提问来源于stack exchange，提问作者Dean Braun