如何使用 iccube 报告 v6 在气泡图中显示格式化值？
How to display Formatted value in bubble chart using iccube reporting v6?
使用 V6 报告，我创建了一个带有简单百分比值的气泡图。我可以使用 "format" 属性 来格式化轴值。但是在气泡工具提示中，该值仍然是原始值...有没有办法显示格式化值而不是值？
以下是基于 "Sales" 模式的报告代码，可以轻松重现：
{
"classID": "ic3.ReportGuts",
"guts_": {
"schemaName": "Sales",
"cubeName": "Sales",
"themeId": "ic3-elegant",
"ic3Rev": 4015,
"layout": {
"classID": "ic3.FixedLayout",
"guts_": {
"grid": 10,
"boxes": [
{
"classID": "ic3.FixedLayoutBox",
"guts_": {
"behaviour": "Fixed Box",
"position": {
"top": 10,
"left": 10,
"width": 930,
"height": 460
},
"advanced": {
"zIndex": 15
},
"header": "@{bubbleTitle}",
"boxStyle": "zoneRequired",
"ic3_uid": "ic3-5",
"widgetAdapterUid": "w1"
}
}
]
}
},
"widgetMgr": {
"classID": "ic3.WidgetAdapterContainerMgr",
"guts_": {
"items": [
{
"classID": "ic3.GoogleChartsAdapter",
"guts_": {
"configState": 3,
"navigationGuts": {
"classID": "ic3.NavigationStrategy",
"guts_": {
"menuVisibility": {
"back": false,
"reset": false
},
"maxAxisMemberCount": 25
}
},
"dataRenderOptions": {
"chartType": {
"label": "Bubble",
"id": "bubble-google-chart",
"proto": {
"options": {
"width": "100%",
"height": "100%",
"bubble": {
"textStyle": {
"fontSize": 10
}
}
},
"chartType": "BubbleChart"
}
},
"axesConfiguration": null,
"graphsConfiguration": null,
"advanced": {
"hAxis": {
"format": "\"##.##%\""
},
"vAxis": {
"format": null
},
"legend": {
"position": "none"
},
"colorAxis": {
"colors": [
"#1F77B4",
"#FF7F0E",
"#2CA02C",
"#D62728",
"#9467BD",
"#8C564B",
"#E377C2",
"#7F7F7F",
"#BCBD22",
"#17BECF"
],
"legend": {
"position": "none"
}
},
"explorer": {},
"sizeAxis": {
"minSize": 7
},
"tooltip": {
"format": null
}
}
},
"ic3_name": "widget-12",
"ic3_eventMapper": {
"classID": "ic3.EventWidgetMapper",
"guts_": {
"__ic3_widgetEventsDescription": {}
}
},
"navigationOptions": {
"menuVisibility": {
"back": false,
"reset": false
}
},
"hooks": {
"beforeData": "/**\n * Return data object\n */\nfunction(context, data, $box) {\n //bubble on data received\n debugger\n\treturn data;\n}",
"beforeRender": "/**\n * Return patched \n * options object.\n */\nfunction(context, options) {\n //bubble before render\n\treturn options;\n}"
},
"ic3_uid": "w1",
"ic3_mdxBuilderUid": "m1"
}
}
]
}
},
"constantMgr": {
"classID": "ic3.ConstantsMgr",
"guts_": {}
},
"cssMgr": {
"classID": "ic3.CssMgr",
"guts_": {}
},
"javascriptMgr": {
"classID": "ic3.ReportJavascriptMgr",
"guts_": {
"js": "/** \n * A function called each time an event is generated. \n * \n * @param context the same object is passed between consumeEvent calls. \n * Can be used to store information. \n * { \n * $report : jQuery context of the report container \n * fireEvent : a function( name, value ) triggering an event \n * } \n * \n * @param event the event information \n * \n { \n * name : as specified in the 'Events' tab \n * value : (optional) actual event value \n * type : (optional) e.g., ic3selection \n * } \n * \n * Check the 'Report Event Names' menu for the list of available events. \n */ \n/* \nfunction consumeEvent( context, event ) { \n if (event.name == 'ic3-report-init') { \n // add your code here \n } \n} \n*/ \n"
}
},
"calcMeasureMgr": {
"classID": "ic3.CalcMeasureMgr",
"guts_": {
"measures": []
}
},
"mdxQueriesMgr": {
"classID": "ic3.MdxQueriesContainerMgr",
"guts_": {
"mdxQueries": {
"classID": "ic3.BaseContainerMgr",
"guts_": {
"items": [
{
"classID": "ic3.QueryBuilderWidget",
"guts_": {
"mode": "MDX",
"options": {
"WIZARD": {
"cubeName": null,
"measures": [],
"rows": [],
"rowsNonEmpty": false,
"columns": [],
"columnsNonEmpty": false,
"filter": []
},
"MDX": {
"statement": "with\nmember [PDM Sejours] as 0.5072 ,format_string=\"percent\"\nmember [Evo PDM] as 0.00291 ,format_string=\"percent\"\nmember [Activité Etablissements] as 8113 ,format_string=\"#,###\"\nselect \n NON EMPTY {[Measures].[PDM Sejours], [Measures].[Evo PDM] , [Measures].[Activité Etablissements]} ON COLUMNS, \nNON EMPTY {[Product].[Product].[Company].[icCube]} on ROWS \nfrom [Sales]\n"
}
},
"ic3_name": "mdx Query-0",
"ic3_uid": "m1",
"schemaSettings": {}
}
}
]
}
},
"mdxFilter": {
"classID": "ic3.BaseContainerMgr",
"guts_": {
"items": []
}
},
"actionBuilders": {
"classID": "ic3.BaseContainerMgr",
"guts_": {
"items": []
}
}
}
},
"customLocalizations": []
}
}
正在为图表格式化 数据 ，应该会显示到工具提示
不熟悉iccube，但是，加载数据时，可以使用google的对象表示法
同时提供值 (v:) 和格式化值 (f:)
例如，而不是加载以下数据行...
['Sub-Saharan Africa', 80, 1.023],
使用对象表示法...
[{v: 'Sub-Saharan Africa'}, {v: 80, f: 'test 80'}, {v: 1.023, f: 'test 1.023000000'}],
工具提示应显示 f:
的值
请参阅以下工作片段...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
cols: [
{label: 'ID', type: 'string'},
{label: 'X', type: 'number'},
{label: 'Y', type: 'number'}
],
rows: [
{c:[{v: 'Sub-Saharan Africa'}, {v: 80, f: 'test 80'}, {v: 1.023, f: 'test 1.023000000'}]},
{c:[{v: 'Arab States'}, {v: 80, f: 'test 80'}, {v: 1.022, f: 'test 1.0220000000'}]},
{c:[{v: 'East Asia and the Pacific'}, {v: 80, f: 'test 80'}, {v: 1.21, f: 'test 1.2100000000'}]}
]
});
var container = document.getElementById('chart_div');
var chart = new google.visualization.BubbleChart(container);
chart.draw(data);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
使用 V6 报告，我创建了一个带有简单百分比值的气泡图。我可以使用 "format" 属性 来格式化轴值。但是在气泡工具提示中，该值仍然是原始值...有没有办法显示格式化值而不是值？
以下是基于 "Sales" 模式的报告代码，可以轻松重现：
{
"classID": "ic3.ReportGuts",
"guts_": {
"schemaName": "Sales",
"cubeName": "Sales",
"themeId": "ic3-elegant",
"ic3Rev": 4015,
"layout": {
"classID": "ic3.FixedLayout",
"guts_": {
"grid": 10,
"boxes": [
{
"classID": "ic3.FixedLayoutBox",
"guts_": {
"behaviour": "Fixed Box",
"position": {
"top": 10,
"left": 10,
"width": 930,
"height": 460
},
"advanced": {
"zIndex": 15
},
"header": "@{bubbleTitle}",
"boxStyle": "zoneRequired",
"ic3_uid": "ic3-5",
"widgetAdapterUid": "w1"
}
}
]
}
},
"widgetMgr": {
"classID": "ic3.WidgetAdapterContainerMgr",
"guts_": {
"items": [
{
"classID": "ic3.GoogleChartsAdapter",
"guts_": {
"configState": 3,
"navigationGuts": {
"classID": "ic3.NavigationStrategy",
"guts_": {
"menuVisibility": {
"back": false,
"reset": false
},
"maxAxisMemberCount": 25
}
},
"dataRenderOptions": {
"chartType": {
"label": "Bubble",
"id": "bubble-google-chart",
"proto": {
"options": {
"width": "100%",
"height": "100%",
"bubble": {
"textStyle": {
"fontSize": 10
}
}
},
"chartType": "BubbleChart"
}
},
"axesConfiguration": null,
"graphsConfiguration": null,
"advanced": {
"hAxis": {
"format": "\"##.##%\""
},
"vAxis": {
"format": null
},
"legend": {
"position": "none"
},
"colorAxis": {
"colors": [
"#1F77B4",
"#FF7F0E",
"#2CA02C",
"#D62728",
"#9467BD",
"#8C564B",
"#E377C2",
"#7F7F7F",
"#BCBD22",
"#17BECF"
],
"legend": {
"position": "none"
}
},
"explorer": {},
"sizeAxis": {
"minSize": 7
},
"tooltip": {
"format": null
}
}
},
"ic3_name": "widget-12",
"ic3_eventMapper": {
"classID": "ic3.EventWidgetMapper",
"guts_": {
"__ic3_widgetEventsDescription": {}
}
},
"navigationOptions": {
"menuVisibility": {
"back": false,
"reset": false
}
},
"hooks": {
"beforeData": "/**\n * Return data object\n */\nfunction(context, data, $box) {\n //bubble on data received\n debugger\n\treturn data;\n}",
"beforeRender": "/**\n * Return patched \n * options object.\n */\nfunction(context, options) {\n //bubble before render\n\treturn options;\n}"
},
"ic3_uid": "w1",
"ic3_mdxBuilderUid": "m1"
}
}
]
}
},
"constantMgr": {
"classID": "ic3.ConstantsMgr",
"guts_": {}
},
"cssMgr": {
"classID": "ic3.CssMgr",
"guts_": {}
},
"javascriptMgr": {
"classID": "ic3.ReportJavascriptMgr",
"guts_": {
"js": "/** \n * A function called each time an event is generated. \n * \n * @param context the same object is passed between consumeEvent calls. \n * Can be used to store information. \n * { \n * $report : jQuery context of the report container \n * fireEvent : a function( name, value ) triggering an event \n * } \n * \n * @param event the event information \n * \n { \n * name : as specified in the 'Events' tab \n * value : (optional) actual event value \n * type : (optional) e.g., ic3selection \n * } \n * \n * Check the 'Report Event Names' menu for the list of available events. \n */ \n/* \nfunction consumeEvent( context, event ) { \n if (event.name == 'ic3-report-init') { \n // add your code here \n } \n} \n*/ \n"
}
},
"calcMeasureMgr": {
"classID": "ic3.CalcMeasureMgr",
"guts_": {
"measures": []
}
},
"mdxQueriesMgr": {
"classID": "ic3.MdxQueriesContainerMgr",
"guts_": {
"mdxQueries": {
"classID": "ic3.BaseContainerMgr",
"guts_": {
"items": [
{
"classID": "ic3.QueryBuilderWidget",
"guts_": {
"mode": "MDX",
"options": {
"WIZARD": {
"cubeName": null,
"measures": [],
"rows": [],
"rowsNonEmpty": false,
"columns": [],
"columnsNonEmpty": false,
"filter": []
},
"MDX": {
"statement": "with\nmember [PDM Sejours] as 0.5072 ,format_string=\"percent\"\nmember [Evo PDM] as 0.00291 ,format_string=\"percent\"\nmember [Activité Etablissements] as 8113 ,format_string=\"#,###\"\nselect \n NON EMPTY {[Measures].[PDM Sejours], [Measures].[Evo PDM] , [Measures].[Activité Etablissements]} ON COLUMNS, \nNON EMPTY {[Product].[Product].[Company].[icCube]} on ROWS \nfrom [Sales]\n"
}
},
"ic3_name": "mdx Query-0",
"ic3_uid": "m1",
"schemaSettings": {}
}
}
]
}
},
"mdxFilter": {
"classID": "ic3.BaseContainerMgr",
"guts_": {
"items": []
}
},
"actionBuilders": {
"classID": "ic3.BaseContainerMgr",
"guts_": {
"items": []
}
}
}
},
"customLocalizations": []
}
}
正在为图表格式化 数据 ，应该会显示到工具提示
不熟悉iccube，但是，加载数据时，可以使用google的对象表示法
同时提供值 (v:) 和格式化值 (f:)
例如，而不是加载以下数据行...
['Sub-Saharan Africa', 80, 1.023],
使用对象表示法...
[{v: 'Sub-Saharan Africa'}, {v: 80, f: 'test 80'}, {v: 1.023, f: 'test 1.023000000'}],
工具提示应显示 f:
请参阅以下工作片段...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
cols: [
{label: 'ID', type: 'string'},
{label: 'X', type: 'number'},
{label: 'Y', type: 'number'}
],
rows: [
{c:[{v: 'Sub-Saharan Africa'}, {v: 80, f: 'test 80'}, {v: 1.023, f: 'test 1.023000000'}]},
{c:[{v: 'Arab States'}, {v: 80, f: 'test 80'}, {v: 1.022, f: 'test 1.0220000000'}]},
{c:[{v: 'East Asia and the Pacific'}, {v: 80, f: 'test 80'}, {v: 1.21, f: 'test 1.2100000000'}]}
]
});
var container = document.getElementById('chart_div');
var chart = new google.visualization.BubbleChart(container);
chart.draw(data);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>