如何删除 ChartView 中的间距？答案

【问题标题】：How to remove spacing in ChartView?如何删除 ChartView 中的间距？
【发布时间】：2021-02-20 01:39:13
【问题描述】：

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

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

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

更新 II

诀窍是使用clip 并将chartView 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()
    }
}

【问题讨论】：

你的 .qml 代码在哪里？
@Nulik 请检查我的更新。
同时在 Qt 的 bug-tracker 上有一个相关的 feature request。任何有兴趣在 Qt 方面“修复”此问题的人，请为该功能投票。
问题与轴有关。如果我将两个轴都设置为不可见，则边距消失。这是第一步，尽管不是解决方案。

标签： qt qml

【解决方案1】：

可能的解决方案 1：QMargins 属性指定绘图区域周围的最小区域。尝试通过调整孩子（情节）本身来填充剩余的填充。

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

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

【讨论】：

你知道，你是对的，谢谢。第一种方法是它的工作方式。
@Doğukan Tunç：你能为解决方案 1 提供一个例子吗？如果我更改 plotArea 的任何成员，图表就会损坏。
您能否提供第一个解决方案的示例？！ plotArea 不适合我。如果我将其设置为 Qt.rect(0, 0, width, height) 我看不到那里的轴及其标签。

【解决方案2】：

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

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

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

ChartView
{
    x: -10
    y: -10

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

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

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

【讨论】：

@Mikhail 这与您找到的解决方案相同吗？
那是很久以前的事了。是的，那个解决方案有点老套，我不得不找到一个新的。诀窍是使用clip。
@Mikhail Hacky 确实！你是如何使用剪辑的？ Chartview 没有该属性，Window 也没有，将其放在矩形内似乎也无济于事。很抱歉为这个老问题打扰您，但它确实让我很恼火，尽管这个 hacky 解决方案有效，但我无法让它正常工作。
@Mikhail 谢谢！

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

澄清解决方案 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

【讨论】：

虽然此代码可能会为问题提供解决方案，但最好添加有关其工作原理/方式的上下文。这可以帮助未来的用户学习并最终将这些知识应用到他们自己的代码中。在解释代码时，您也可能会得到用户的积极反馈/赞成。
只有在不需要轴刻度和标签时才有效。

【解决方案5】：

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

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) 也可以解决问题，但它不能：因为轴和轴标签在这种情况下由于某种原因消失了。

【讨论】：