Javascript NReco构建数据透视表图表
我正在使用NReco构建数据透视表,我想显示一个与表中显示的数据相对应的图表。我正试图用c3图表来实现这一点(非常喜欢它的外观),但另一种图表是受欢迎的 我将通过ajax发送NReco Pivot表的JSON,并遵循上的示例,用以下代码构建JSON:Javascript NReco构建数据透视表图表,javascript,c#,json,c3.js,nreco,Javascript,C#,Json,C3.js,Nreco,我正在使用NReco构建数据透视表,我想显示一个与表中显示的数据相对应的图表。我正试图用c3图表来实现这一点(非常喜欢它的外观),但另一种图表是受欢迎的 我将通过ajax发送NReco Pivot表的JSON,并遵循上的示例,用以下代码构建JSON: var pivotTable = new PivotTable(lines, columns, pivotData); var htmlResult = new StringWriter(); va
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或其他图表来实现这一点吗?查看PivotData示例包中的小部件,该小部件通过PivotTableJsonWriter返回的Json结构呈现带有ChartistJS库的pivot图表: 其使用方式如下:
<div id='pivotChart'></div>
<script type="text/javascript">
$('#pivotChart').nrecoPivotChart( {
chartType : "bar",
pivotData : JSON.parse( jsonProducedByPivotTableJsonWriter )
});
</script>
要正确显示二维透视表数据,您可能还需要指定自定义轴标签。我尝试使用您的解决方案,结果相同,如何查看图表结果:
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
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"})