具有多个 Y 轴的可视化框架组合图表
VizFrame combined chart with multiple Y-Axis
我对SAPUI5框架的VizFrame控件有问题。我想在具有两个 Y 轴的复杂图表中显示一些数据。我的数据模型如下所示:
{
"d" : {
"results" : [
{
"DataA" : "2",
"DataB" : "4",
"Id" : "1",
},
{
"DataA" : "3",
"DataB" : "2",
"Id" : "2",
}
]
}
}
我尝试在左侧 Y 轴上显示 DataA,在右侧显示 DataB,同时使用 Id 作为 X 轴。这适用于 VizFrame 类型:dual_line 和 dual_column。
我还没有找到将数据显示为条形图(Y1 上的 DataA(和线条(Y2 上的 DataB(的方法。我目前的编码如下所示:
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("data.json");
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis : 2,
name : oLocText.getText('Id'),
value : "{Id}"
}],
measures : [{
group : 1,
name : DataA,
value : '{DataA}'
},{
group : 2,
name: DataB,
value: '{DataB}'
}],
data : {
path : "/d/results"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
oVizFrame.setVizType('combination');
oVizFrame.setVizProperties({
title: {
visible: true,
text: "Combined"
},
plotArea: {
colorPalette : d3.scale.category20().range(),
}});
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "primaryValues",
'type': "Measure",
'values': [ DataA , DataB]
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "axisLabels",
'type': "Dimension",
'values': [ Id]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
非常感谢您的帮助!
请尝试:
var feedValueAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': [ DataA ]
}), feedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis2",
'type': "Measure",
'values': [DataB]
}),
它将自动plot
DataA
left axis
作为柱线,DataB
right
axis
作为线。
请注意,从SAPUI5 1.40.
开始提供双重组合
我不知道
你的问题是否仍然相关。如果我答对了你的问题,那就是将度量值显示为条形/线。我有一个类似的问题,我通过设置 plotArea 的 dataShape 属性解决了它:
oVizFrame.setVizProperties({
plotArea: { dataShape : {primaryAxis : ['bar','bar','bar'],
secondaryAxis : ['line', 'line', 'line']}}
});
在此示例中,每个轴上最多绘制 3 个度量,在轴 1 上绘制为条形,在轴 2 上绘制为线。我想一旦你看到这个编码,你就知道当你想改变条形与线时该怎么做。一个评论:这里只允许"bar"和"line"(我检查了文档和源代码(。此致敬意塞巴斯蒂安
相关文章:
- 如何在谷歌可视化中组合数字和模式格式化程序
- 加载泰坦尼克号可视化数据时出现问题
- 如何使用图表包装函数有条件地格式化谷歌可视化表单元格
- AngularJS&Google可视化-使用状态更改处理程序(Google API)在HTML页面上查看$sco
- Javascript图形可视化工具包,具有高性能(500-1000个节点)
- Google可视化addListener调用函数引用错误
- 如何在web上动态可视化数据集
- 可视化到选择框中
- 从特定系列的谷歌可视化折线图中删除悬停工具提示
- 谷歌图表可视化仪表板数据源问题
- 在可视化中将CSS从悬停更改为单击
- 使用 d3 可视化快速射击的“点击”
- 为 D3 可视化创建平均 Y 线
- 谷歌可视化数据表间歇性问题
- Google 图表 - 设置选择不会滚动到表格可视化中的选定行
- 在纯HTML5中是否可以进行高级可视化编程
- 无法可视化百分比数字(获取 NaN)
- 如何修复谷歌可视化-材料线中的重叠问题
- JS框架,用于在Canvas上创建可视化模拟
- 具有多个 Y 轴的可视化框架组合图表