NReco 构建 Pivot Table 图表

Question

我正在使用 NReco 构建 PivotTables，我想显示一个与 table 中显示的数据相对应的图表。我正在尝试使用 c3 图表（真的很喜欢它的外观）来完成此操作，但欢迎使用另一种图表。

我正在通过 ajax 发送 NReco Pivot Table 的 JSON 并遵循 http://c3js.org/samples/data_rowed.html 上的示例，并在中构建我的 JSON以下代码：

        var pivotTable = new PivotTable(lines, columns, pivotData);

        var htmlResult = new StringWriter();
        var jsonResult = new StringWriter();
        var pvtHtmlWr = new PivotTableHtmlWriter(htmlResult);
        var chartJsonWr = new PivotTableJsonWriter(jsonResult);
        pvtHtmlWr.Write(pivotTable);
        chartJsonWr.Write(pivotTable);
        
        return new   {Pvt = htmlResult.ToString(), Chart = jsonResult.ToString()};

结果如下JSON

"Chart":"{\"Columns\":[\"Year\"],\"Rows\":[\"Spot\"],\"ColumnKeys\":[[2004],[2005]],\"RowKeys\":[[\"A\"],[\"B\"],[\"C\"]],\"Values\":[[1483.0,1396.0],[1237.0,1700.0],[18276.0,17643.0]],\"GrandTotal\":41735.0,\"ColumnTotals\":[20996.0,20739.0],\"RowTotals\":[2879.0,2937.0,35919.0],\"MeasureLabels\":[\"Sum"],\"PivotDataVersion\":\"TRIAL http://www.nrecosite.com/pivot_data_library_net.aspx\"}"

在我的 ajax 调用中，我解析 Json 并尝试构建图表

    success: function (response) {
            $("#pvtTable").html(response.Pvt);
          
            var crt = JSON.parse(response.Chart);
            var rows = crt.RowKeys;
            var vals = crt.Values;
            
            var chart = c3.generate({
                bindto:"#pvtChart",
                data: {
                    rows: [rows, vals]
                       
                }
            });

但图表只显示行的标签

我尝试重建阵列但没有成功。所以我的问题是：我做错了什么？我可以用 NReco Json 和 c3 或其他图表完成这个吗？

Answer 1

查看 PivotData 示例包中的小部件，该小部件通过 PivotTableJsonWriter 返回的 JSON 结构使用 ChartistJS 库呈现数据透视图：http://pivottable.nrecosite.com/Scripts/jquery.nrecopivotchart.js

使用方法如下：

<div id='pivotChart'></div>
<script type="text/javascript">
$('#pivotChart').nrecoPivotChart( { 
  chartType : "bar",
  pivotData : JSON.parse( jsonProducedByPivotTableJsonWriter )
});
</script>

您当然没有义务只使用 ChartistJS，但您可以探索 "nrecoPivotChart" 插件代码以了解如何为您最喜欢的图表库准备数据。说到 C3.js，它需要这样的输入：

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});

要正确显示 2D 枢轴 table 数据，您可能还需要指定自定义轴标签。

Answer 2

我尝试了您的解决方案，结果相同，您如何查看图表结果：

var pivotData = {
        "Columns": [],
        "Rows": ["country_code"],
        "ColumnKeys": [],
        "RowKeys": [["AR"], ["AT"], ["AU"], ["BE"], ["BG"], ["BR"], ["CA"], ["CH"], ["CY"], ["CZ"], ["DE"], ["DK"], ["EE"], ["ES"], ["FI"], ["FR"], ["GB"], ["GR"], ["HK"], ["HR"], ["HU"], ["IC"], ["ID"], ["IE"], ["IN"], ["IS"], ["IT"], ["JP"], ["KR"], ["LT"], ["LU"], ["LV"], ["MC"], ["MT"], ["MX"], ["NL"], ["NO"], ["PL"], ["PT"], ["RO"], ["RS"], ["RU"], ["SE"], ["SI"], ["SK"], ["TW"], ["UA"], ["US"]],
        "Values": [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
        "GrandTotal": [1099930.98],
        "ColumnTotals": [],
        "RowTotals": [[212.0], [8037.5], [1199.80], [5885.6], [559.79], [269.1], [2027.49], [10291.71], [488.2], [60119.58], [67519.10], [1340.0], [180.0], [28126.66], [2473.98], [30158.81], [30894.91], [3580.03], [290.0], [7354.7], [83371.2], [48.50], [325.8], [854.34], [173.50], [319.0], [161664.01], [323.0], [506.0], [786.8], [544.3], [1618.66], [2882.0], [98.90], [2745.0], [12125.1], [52.0], [3151.6], [2894.69], [7968.99], [119.99], [538542.9], [1126.05], [599.18], [2223.32], [70.5], [400.0], [13386.69]],
        "MeasureLabels": ["Sum of total_product_paid"]
    };
$('#_1506339485927').nrecoPivotChart( {
            pivotData: pivotData,
            chartType: "bar"})

NReco 构建 Pivot Table 图表

NReco build Pivot Table chart

javascript

c#

json

c3.js

nreco