如何去除间距?QML ChartView

Mik*_*ail 6 qt qml

有人知道如何删除此间距吗?

在此处输入图片说明

下面的那些线会减少它们,但不能完全消除。

margins.top: 0
margins.bottom: 0
margins.left: 0
margins.right: 0
Run Code Online (Sandbox Code Playgroud)

更新 我添加了一些代码。也许这可以帮助确定我的问题。最初,箭头所在的空格用于图例和刻度值。我在不更改源代码的情况下无法执行任何操作。

ScopeView.qml

import QtQuick 2.0
import QtCharts 2.1

ChartView {
    id: chartView

    animationOptions: ChartView.NoAnimation
    theme: ChartView.ChartThemeQt
    legend.visible: false

    margins.top: 0
    margins.bottom: 0
    margins.left: 0
    margins.right: 0

    backgroundRoundness: 0

    property bool openGL: true
    onOpenGLChanged: {
        series("signal 1").useOpenGL = openGL;
    }

    ValueAxis {
        id: axisY1
        min: -1
        max: 4
        labelsVisible: false
        tickCount: 3

        color: "transparent"
    }

    ValueAxis {
        id: axisX
        min: 0
        max: 1024

        labelsVisible: false
        tickCount: 4

        color: "transparent"
    }

    LineSeries {
        id: lineSeries1
        name: "signal 1"
        axisX: axisX
        axisY: axisY1
        useOpenGL: chartView.openGL
        color: "#44D77B"
    }

    Timer {
        id: refreshTimer
        interval: 1 / 60 * 1000 // 60 Hz
        running: true
        repeat: true
        onTriggered: {
            dataSource.update(chartView.series(0));
        }
    }

    function changeSeriesType(type) {
        chartView.removeAllSeries();

        // Create two new series of the correct type. Axis x is the same for both of the series,
        // but the series have their own y-axes to make it possible to control the y-offset
        // of the "signal sources".
        if (type == "line") {
            var series1 = chartView.createSeries(ChartView.SeriesTypeLine, "signal 1",
                                                 axisX, axisY1);
            series1.useOpenGL = chartView.openGL
        } else {
            var series1 = chartView.createSeries(ChartView.SeriesTypeScatter, "signal 1",
                                                 axisX, axisY1);
            series1.markerSize = 2;
            series1.borderColor = "transparent";
            series1.useOpenGL = chartView.openGL
        }
    }

    function createAxis(min, max) {
        // The following creates a ValueAxis object that can be then set as a x or y axis for a series
        return Qt.createQmlObject("import QtQuick 2.0; import QtCharts 2.0; ValueAxis { min: "
                                  + min + "; max: " + max + " }", chartView);
    }

    function setAnimations(enabled) {
        if (enabled)
            chartView.animationOptions = ChartView.SeriesAnimations;
        else
            chartView.animationOptions = ChartView.NoAnimation;
    }

    function changeRefreshRate(rate) {
        refreshTimer.interval = 1 / Number(rate) * 1000;
    }
}
Run Code Online (Sandbox Code Playgroud)

更新二

诀窍是使用clipchartView并将其放置into为矩形。

Rectangle {
    id: canvas
    anchors{
        left: parent.left
        right: parent.right
        top: parent.top
    }
    height: 250
    color: "#FFFFFF"
    z: propText.z - 1

    clip: true

    Rectangle {
        width: parent.width
        height: 40

        z: 1

        color: "#FFFFFF"
    }

    GraphView{ //ChartView
        id: graphView
        isTimerRunnig: isRunning
        channelId: channelId
    }
}
Run Code Online (Sandbox Code Playgroud)

ChartView aka GraphView

ChartView {
id: chartView

property alias channelId: dataSource.channelId
property alias isTimerRunnig: refreshTimer.running
property bool openGL: true

antialiasing: !openGL
legend.visible: false

margins.top: 0
margins.bottom: 0
margins.left: 0
margins.right: 0

x: -70
y: 20

width: 360
height: 262

backgroundRoundness: 0


onOpenGLChanged: {
    series("signal 1").useOpenGL = openGL;
}

DataSource {
    id: dataSource
    channelId: channelId
    isPaused: !isTimerRunnig

    onIsPausedChanged: {
        if(isPaused){
            lineSeries1.clear()
        }
    }
}

ValueAxis {
    id: axisY

    //gridVisible: false
    labelsVisible: false
    tickCount: 3

    color: "transparent"
}

ValueAxis {
    id: axisX
    min: 0
    max: 100

    //gridVisible: false
    labelsVisible: false
    tickCount: 4

    color: "transparent"
}

LineSeries {
    id: lineSeries1
    name: "signal 1"
    axisX: axisX
    axisY: axisY
    useOpenGL: chartView.openGL
    color: "#44D77B"
    width: 2
}

Timer {
    id: refreshTimer
    interval: 1 / 25 * 1000 // 25 Hz
    running: isTimerRunnig
    repeat: true
    onTriggered: {
        dataSource.updateFromQML(chartView.series(0), chartView.axisY(chartView.series(0)))
        //dataSource.printChannelId()
    }
}
Run Code Online (Sandbox Code Playgroud)

}

Doğ*_*unç 7

可能的解决方案1:QMargins属性指定绘图区域周围的最小区域。尝试通过调整子代(图)本身来填充剩余的填充。

plotArea:rect ChartView上用于绘图系列的区域。这是没有边距的ChartView矩形。

可能的解决方案2:设置边距后,尝试重新绘制父布局。如果在创建窗口之后调整边距,则不一定会立即刷新视图。


小智 5

我遇到了同样的问题,但不太明白解决方案 1 中接受的答案意味着什么。我找到了一个对我有用的问题的解决方案,所以我将它作为另一个答案发布在这里。

(我很想更具体地知道接受的灵魂是什么,但我还不能评论其他人的答案。)

我的解决方案是在任何情况下(除了将边距设置为 0 如问题所示,并且图例和轴不可见):

ChartView
{
    x: -10
    y: -10

    width: parent.width + 20
    height: parent.height + 20
}
Run Code Online (Sandbox Code Playgroud)

这只是手动将 Chartview 的绘图区域移动到父组件的左上角并适当调整其大小。我不知道数字 10 来自哪里,但这似乎是剩余边距的大小。这个问题的“真正”答案是如何以更健壮的方式将其设置为 0。

如果此答案与已接受的答案中提到的答案相同,或者该答案确实更可靠,请告诉我!