如何删除ChartView中的间距？

问题描述 投票：0回答：6

有人知道如何去掉这个间距吗？

下面的这些行减少了它们，但没有完全删除。

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

更新 我添加了一些代码。也许这可以帮助确定我的问题。最初，箭头所在的空白区域用于图例和刻度值。我想如果不改变源代码我什么也做不了。

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;
    }
}

更新二

技巧是使用 

clip
并将图表视图 
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
    }
}

和

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()
    }
}
qt qml
6个回答
7
投票

可能的解决方案1： 

QMargins
属性指定绘图区域周围的最小面积。尝试通过调整子项（图）本身来填充剩余的填充。

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

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

5
投票

我有同样的问题，但不太明白解决方案 1 中接受的答案的含义。我找到了一个对我有用的问题解决方案，所以我将其作为另一个答案发布在这里。

（我想更具体地知道公认的灵魂是什么，但我还不能评论其他人的答案。）

我的解决方案是无论如何（除了将边距设置为0，如问题所示，并且图例和轴不可见）：

ChartView
{
    x: -10
    y: -10

    width: parent.width + 20
    height: parent.height + 20
}

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

如果这个答案与已接受的答案中提到的答案相同，或者该答案确实是一个更可靠的答案，请告诉我！

5
投票

另一个技巧是将以下几行添加到ChartView

anchors { fill: parent; margins: -15 }
margins { right: 0; bottom: 0; left: 0; top: 0 }
2
投票

澄清解决方案 1 如何为我工作（Qt 5.12.6）：

ChartView {
    id: chart

    width: parent.width
    height: parent.height
    plotArea: Qt.rect(chart.x, chart.y, chart.width, chart.height)

    anchors {
        fill: parent
        margins: 0
    }

    legend.visible: false
    backgroundRoundness: 0
1
投票

这对我有用（Qt 6.4.0）。

QChart chart;
chart.setMargins(QMargins(0, 0, 0, 0));

您也可以尝试负边距。

0
投票

我在模式对话框中遇到了同样的错误：对话框周围有白色边框，并以某种方式解决了它：

contentItem: Rectangle {
    anchors.fill: parent
    color: "black"
    border.width: 1
    ...
}

在这里，我通过将边距设置为零并将 

ChartView
包装到另一个具有相同背景颜色的 
Rectangle
来解决这个问题，因为设置负固定边距不太正确，因为必要的值可能不同：

Item {
    Rectangle {
        color: "black"
        anchors.fill: parent
    }

    ChartView {
        id: chart
        anchors.fill: parent
        antialiasing: true
        margins { top: 0; bottom: 0; left: 0; right: 0 }
//        plotArea: Qt.rect(0, 0, width, height)
        backgroundColor: "black"
        backgroundRoundness: 0
        legend.visible: false
        ...
    }
}

注释掉

plotArea: Qt.rect(0, 0, width, height)
也可能解决问题，但事实并非如此：因为在这种情况下，轴和轴标签由于某种原因消失了。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.