Question

我正在使用NReco来构建数据透视表，我想显示一个与表中显示的数据相对应的图表。我试图用c3图表来实现这个目标（非常像外观），但欢迎另一种图表。

我通过ajax发送NReco数据透视表的JSON并按照http://c3js.org/samples/data_rowed.html上的示例，并使用以下代码构建我的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\"}"

导致以下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]

                }
            });

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

// Extending marker with custom option
L.Marker.Custom = L.Marker.extend({
     options: {
          customValue: false
     }
});

// Instanciating without custom option:
var marker = new L.Marker.Custom([0,0]);
console.log(marker.options.customValue); //false

// Instanciating with custom option:
var marker = new L.Marker.Custom([0,0], {
    customValue: true
});
console.log(marker.options.customValue); //true

但图表只显示行的标签

我尝试重建阵列但没有成功。所以我的问题是：我做错了什么？我可以使用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，但您可以探索＆＃34; nrecoPivotChart＆＃34;插件代码，以了解如何为您喜欢的图表库准备数据。谈到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枢轴表数据，您可能还需要指定自定义轴标签。

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构建数据透视表

2 个答案: