Question

我对SAPUI5 Framework的VizFrame控件有疑问。我想在带有两个Y轴的复杂图表中显示一些数据。我的数据模型如下所示：

import java.awt.*;
import java.awt.event.*;
import java.io.IOException;
import java.net.InetAddress;
import javax.swing.*;
import javax.swing.border.EmptyBorder;


class PanelDemo {

    JButton jbtnUpArrowFirst;
    JButton jbtnDownArrowFirst;
    JButton jbtnUpArrowSec;
    JButton jbtnDownArrowSec;
    JButton jbtnUpArrowThird;
    JButton jbtnDownArrowThird;

    JLabel jlblLedUpFirst;
    JLabel jlblLedDownFirst;
    JLabel jlblLedUpSec;
    JLabel jlblLedDownSec;
    JLabel jlblLedUpThird;
    JLabel jlblLedDownThird;

    private JComponent ui = null;
    private Insets buttonMargin = new Insets(10,10,10,10);

    PanelDemo() throws IOException {

        InitComponents();
    }

    private void InitComponents() {

        if (ui != null) return;

        ui = new JPanel(new BorderLayout(4,4));
        ui.setBorder(new EmptyBorder(4,4,4,4));

        int gap = 5;


        JPanel jpnl = new JPanel(new GridLayout(2, 4, gap, gap));
        jpnl.setBorder(new EmptyBorder(0, 0, 0, 50));
        jpnl.setOpaque(true);
        jpnl.setBorder(
                BorderFactory.createLineBorder(Color.BLUE));


        JPanel jpnl2 = new JPanel(new GridLayout(2, 2, gap, gap));
        jpnl2.setOpaque(true);
        jpnl2.setBorder(
                BorderFactory.createLineBorder(Color.RED));





        jbtnUpArrowFirst = new JButton("upfirst" ,new ImageIcon("/Users/Jack/Desktop/up.png"));
        jbtnUpArrowFirst.setVerticalTextPosition(SwingConstants.BOTTOM);
        jbtnUpArrowFirst.setHorizontalTextPosition(SwingConstants.CENTER);

        jbtnDownArrowFirst = new JButton("downfirst" ,new ImageIcon("/Users/Jack/Desktop/down.png"));
        jbtnDownArrowFirst.setVerticalTextPosition(SwingConstants.BOTTOM);
        jbtnDownArrowFirst.setHorizontalTextPosition(SwingConstants.CENTER);


        jlblLedUpFirst = new JLabel("upledfirst", new ImageIcon("/Users/Jack/Desktop/ledOff.png"), SwingConstants.CENTER);
        jlblLedUpFirst.setVerticalTextPosition(SwingConstants.BOTTOM);
        jlblLedUpFirst.setHorizontalTextPosition(SwingConstants.CENTER);


        jlblLedDownFirst = new JLabel("downledfirst", new ImageIcon("/Users/Jack/Desktop/ledOff.png"), SwingConstants.CENTER);
        jlblLedDownFirst.setVerticalTextPosition(SwingConstants.BOTTOM);
        jlblLedDownFirst.setHorizontalTextPosition(SwingConstants.CENTER);


        ////////////////////////////////////////////////////////////////////////
        jbtnUpArrowSec = new JButton("upsec", new ImageIcon("/Users/Jack/Desktop/up.png"));
        jbtnUpArrowSec.setVerticalTextPosition(SwingConstants.BOTTOM);
        jbtnUpArrowSec.setHorizontalTextPosition(SwingConstants.CENTER);

        jbtnDownArrowSec = new JButton("downsec" ,new ImageIcon("/Users/Jack/Desktop/down.png"));
        jbtnDownArrowSec.setVerticalTextPosition(SwingConstants.BOTTOM);
        jbtnDownArrowSec.setHorizontalTextPosition(SwingConstants.CENTER);


        jlblLedUpSec = new JLabel("upledsecond", new ImageIcon("/Users/Jack/Desktop/ledOff.png"), SwingConstants.CENTER);
        jlblLedUpSec.setVerticalTextPosition(SwingConstants.BOTTOM);
        jlblLedUpSec.setHorizontalTextPosition(SwingConstants.CENTER);

        jlblLedDownSec = new JLabel("downledsec", new ImageIcon("/Users/Jack/Desktop/ledOff.png"), SwingConstants.CENTER);
        jlblLedDownSec.setVerticalTextPosition(SwingConstants.BOTTOM);
        jlblLedDownSec.setHorizontalTextPosition(SwingConstants.CENTER);
        ////////////////////////////////////////////////////////////////////////
        jbtnUpArrowThird = new JButton("upthirt", new ImageIcon("/Users/Jack/Desktop/up.png"));
        jbtnUpArrowThird.setVerticalTextPosition(SwingConstants.BOTTOM);
        jbtnUpArrowThird.setHorizontalTextPosition(SwingConstants.CENTER);

        jbtnDownArrowThird = new JButton("downthird" ,new ImageIcon("/Users/Jack/Desktop/down.png"));
        jbtnDownArrowThird.setVerticalTextPosition(SwingConstants.BOTTOM);
        jbtnDownArrowThird.setHorizontalTextPosition(SwingConstants.CENTER);


        jlblLedUpThird = new JLabel("upledthird", new ImageIcon("/Users/Jack/Desktop/ledOff.png"), SwingConstants.CENTER);
        jlblLedUpThird.setVerticalTextPosition(SwingConstants.BOTTOM);
        jlblLedUpThird.setHorizontalTextPosition(SwingConstants.CENTER);

        jlblLedDownThird = new JLabel("downledthird", new ImageIcon("/Users/Jack/Desktop/ledOff.png"), SwingConstants.CENTER);
        jlblLedDownThird.setVerticalTextPosition(SwingConstants.BOTTOM);
        jlblLedDownThird.setHorizontalTextPosition(SwingConstants.CENTER);


        // Add the buttons and label to the panel.
        jpnl.add(jbtnUpArrowFirst);
        jpnl.add(jlblLedUpFirst);
        jpnl.add(jbtnUpArrowSec);
        jpnl.add(jlblLedUpSec);
        jpnl.add(jbtnDownArrowFirst);
        jpnl.add(jlblLedDownFirst);
        jpnl.add(jbtnDownArrowSec);
        jpnl.add(jlblLedDownSec);

        jpnl2.add(jbtnUpArrowThird);
        jpnl2.add(jlblLedUpThird);
        jpnl2.add(jbtnDownArrowThird);
        jpnl2.add(jlblLedDownThird);


        ui.add(jpnl, BorderLayout.CENTER);
        ui.add(jpnl2, BorderLayout.LINE_END);

        JFrame jfrm = new JFrame("Use Two JPanels");
        jfrm.setLocationByPlatform(true);
        jfrm.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        jfrm.setContentPane(getUI());
        jfrm.setMinimumSize(jfrm.getSize());
        jfrm.pack();
        jfrm.setVisible(true);

        /*jbtnUpArrowFirst.addActionListener(e -> {
            try {
                test.send("ANTSW=VERT\r\n");

                //if (test.recv().equalsIgnoreCase(""))

            } catch (IOException e1) {
                e1.printStackTrace();
            }
        });

        jbtnDownArrowFirst.addActionListener(e -> {
            try {
                test.send("ANTSW=HORZ\r\n");
            } catch (IOException e1) {
                e1.printStackTrace();
            }
        });*/

    }

    public JComponent getUI() {
        return ui;
    }

    public static void main(String args[]) {
        // Create the frame on the event dispatching thread.
        SwingUtilities.invokeLater(() -> {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                    new PanelDemo();
                } catch (IOException e) {
                    e.printStackTrace();
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                } catch (InstantiationException e) {
                    e.printStackTrace();
                } catch (UnsupportedLookAndFeelException e) {
                    e.printStackTrace();
                } catch (ClassNotFoundException e) {
                    e.printStackTrace();
                }
        });
    }
}

我尝试在左侧Y轴上显示DataA，在右侧上显示DataB，同时使用Id作为X轴。这适用于VizFrame类型没有问题： dual_line 和 dual_column 。

我还没有找到一种方法来将数据显示为条形图（Y1上的DataA）和线条（Y2上的DataB）。我目前的编码如下：

{
      "d" : {
        "results" : [
          {
            "DataA" : "2",
            "DataB" : "4",
            "Id" : "1",
          },
          {
            "DataA" : "3",
            "DataB" : "2",
            "Id" : "2",
          }
       ]
   }
}

非常感谢你的帮助！

Answer 1

请尝试：

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.

开始提供双重组合

Answer 2

我不知道你的问题是否仍然相关。如果我的问题是正确的，那就是将测量值显示为条形/线条。我遇到了类似的问题，我通过设置plotArea的dataShape属性来解决它：

oVizFrame.setVizProperties({
    plotArea: { dataShape : {primaryAxis : ['bar','bar','bar'],
                            secondaryAxis : ['line', 'line', 'line']}}
});

在这个例子中，每个轴上最多3个度量将被绘制为轴1上的条和轴2上的线。我想一旦你看到这个编码，你知道当你想改变条形码时要做什么线。一句话：这里只允许'bar'和'line'（我检查了文档和源代码）。最好的祝福，塞巴斯蒂安

VizFrame将图表与多个Y轴组合在一起

2 个答案: