WebDataRocks Highcharts在筛选时不更新数据

kknvjkwl  于 2023-03-23  发布在  Highcharts
关注(0)|答案(1)|浏览(110)

在切片中的父行上进行筛选时;子行(设置为图表上的行切片)没有更新。图表没有更改。下面是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中的数据,但都没有用。

34gzjxbg

34gzjxbg1#

在提供的JavaScript代码中,"Country"字段不存在于传递给getData方法的切片中。过滤国家不会影响图表,因为此字段不会传递给图表的数据。将"Country"添加到行将有助于实现所需的行为:

pivot.highcharts.getData({
    type: "bar",
    slice: {
        rows: [{
            uniqueName: "Category"
        },{
            uniqueName: "Country"
        }],
        columns: [{
            uniqueName: "Measures"
        }],
        measures: [{
            uniqueName: "Price",
            format:"currency"
        }]
    }
}, createAndUpdateChart, createAndUpdateChart);

相关问题