QML/Qt 渐变图答案

【问题标题】：QML/Qt gradient chartsQML/Qt 渐变图
【发布时间】：2020-09-23 19:46:20
【问题描述】：

我想在 QML/Qt 中创建一个图表（两个“平台”的解决方案就足够了）。这是我想要的一个例子：

我画这样的图表：

ChartView {
    title: "Температура"
    antialiasing: true
    legend.visible: false
    height: parent.height
    anchors.right: parent.right
    anchors.left: parent.left

    SplineSeries {
         color: "#5fafff"
         XYPoint { x: 0; y: 0 }
         XYPoint { x: 0.5; y: 1.1 }
         XYPoint { x: 1.0; y: 2.9 }
         XYPoint { x: 1.5; y: 2.1 }
         XYPoint { x: 2.0; y: 4.9 }
         XYPoint { x: 2.5; y: 3.4 }
         XYPoint { x: 3.0; y: 4.1 }
    }
}

但是如何在这里添加渐变呢？

【问题讨论】：

SplineSeries 只是一行，我想您必须改用AreaSeries。不确定，但您可以尝试使用AreaSeries.brushFilename，即分配给包含一些渐变的图像文件的属性路径。我想在这里使用Gradient 或类似的东西是不可用的。您可以使用一些外部库，也许是 Canvas 自己绘制图形。

标签： qt charts qml gradient

【解决方案1】：

如果您只想在您的系列中使用渐变，而不是区域渐变，您可以将 Glow 和 Linear Gradient 一起使用，您将使用您的发光进行锚定。您也可以使用该链接轻松创建视觉渐变。 https://cssgradient.io/ 所以这里是一个简单的用法示例：

   Glow {
            id:glow
            anchors.fill: yourchartid
            radius: 18
            samples: 168
            color: "purple"
            source: yourchartid 

    }

LinearGradient {
            id:gradient
            // 200 is length of gamut
            start:Qt.point(200,0)
            end:Qt.point(0,0)
            gradient: Gradient {
                    GradientStop {
                            position: 1;
                            color: "#312c36";
                    }

                    GradientStop {
                            position: 0.5;
                            color: "#5f4a69";
                    }


                    GradientStop {
                            position: 0.2;
                            color: "#a600ff";
                    }
           }
           anchors.fill = glow
           source = glow
    }

【讨论】：