WebDataRocks Highcharts 在过滤时不更新数据

问题描述 投票:0回答:0

过滤切片中的父行时;子行(设置为图表上的行切片)未更新。图表没有变化。下面是 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 中的数据,但无济于事。

javascript highcharts pivot-table webdatarocks flexmonster
© www.soinside.com 2019 - 2024. All rights reserved.