0

我正在使用 NReco 构建数据透视表，我想显示一个与表中显示的数据相对应的图表。我正在尝试使用 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 或其他图表来完成此任务吗？

4

2 回答 2

0

查看 PivotData 示例包中的小部件，该小部件通过以下方式返回的 JSON 结构使用 ChartistJS 库呈现数据透视图：http PivotTableJsonWriter: //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 数据透视表数据，您可能还需要指定自定义轴标签。

于 2017-07-20T18:49:30.553 回答
0

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

在此处输入图像描述

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"})
于 2017-09-28T13:21:47.440 回答