qml可以使用的某个chart

在QT论坛上看到某个哥们写的,还没试,但是感觉还不错,先把代码存着。
据说是用canvas画的。

import QtQuick 2.15
import QtCharts 2.15
import "qrc:/"

ChartView {
    id: root

    property alias axisX: axisXId
    property alias axisY: axisYId

    property real yAxisLowerBound: 0
    property real yAxisUpperBound: 25
    property real xAxisLowerBound: 0
    property real xAxisUpperBound: 1000

    property string labelFontFamily: Style.primaryFont
    property int labelFontSize: 16
    property color labelFontColor: Style.colorWhite

    QtObject {
        id: internal
        property var context: null
    }

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

    //antialiasing: true
    backgroundColor: "transparent"
    legend.visible: false

    property var backgroundPaint: function() {
        drawCachedZone(220, 11, 450, 19, "#99FFFFFF");
        drawXCachedZone(yAxisLowerBound, 100, "#99FFFFFF");
    }

    property var foregroundPaint: function() {
        drawYTick(20, Style.colorError, 2);
        drawYTick(10, Style.colorFailure, 2);

        drawXTick(200, Style.colorSuccess, 2);
        drawXTick(500, Style.colorVariant, 2);

        drawXPeak(800, 22, Style.colorAccent);
        drawXPit(900, 8, Style.colorWarning);
        drawXPoint(850, 15, Style.colorSuccess);

        drawYPeak(400, 4, Style.colorAccent);
        drawYPit(300, 3, Style.colorWarning);
        drawYPoint(200, 2, Style.colorSuccess);

        drawBox(600, 2, 700, 8, Style.colorWarning, 3);
    }

    function repaintCanvas() {
        backgroundCanvas.requestPaint();
        foregroundCanvas.requestPaint();
    }

    function drawYTick(y, color, lineWidth) {
        drawLine(xAxisLowerBound, y, xAxisUpperBound, y, color, lineWidth);

        drawYLabel(y, Code.floatToStringRound(y,1), Style.colorWhite);
    }

    function drawXTick(x, color, lineWidth) {
        drawLine(x, yAxisLowerBound, x, yAxisUpperBound, color, lineWidth)

        drawXLabel(x, Code.floatToStringRound(x,1), Style.colorWhite);
    }

    function drawBox(startX, startY, endX, endY, color, lineWidth) {
        drawLine(startX, startY, startX, endY, color, lineWidth);
        drawLine(startX, endY, endX, endY, color, lineWidth);
        drawLine(endX, endY, endX, startY, color, lineWidth);
        drawLine(endX, startY, startX, startY, color, lineWidth);
    }

    function drawXPit(x, y, color) {
        drawLine(x, yAxisLowerBound, x, y, color, 1)

        drawXLabel(x, Code.floatToStringRound(x,1), color);

        drawTrianglePoint(x, y, color, 180)
    }

    function drawXPeak(x, y, color) {
        drawLine(x, yAxisLowerBound, x, y, color, 1)

        drawXLabel(x, Code.floatToStringRound(x,1), color);

        drawTrianglePoint(x, y, color, 0)
    }

    function drawXPoint(x, y, color) {
        drawLine(x, yAxisLowerBound, x, y, color, 1)

        drawXLabel(x, Code.floatToStringRound(x,1), color);

        drawSquarePoint(x, y, color);
    }

    function drawYPit(x, y, color) {
        drawLine(x, y, xAxisLowerBound, y, color, 1)

        drawYLabel(y, Code.floatToStringRound(y,1), color);

        drawTrianglePoint(x, y, color, 270)
    }

    function drawYPeak(x, y, color) {
        drawLine(x, y, xAxisLowerBound, y, color, 1)

        drawYLabel(y, Code.floatToStringRound(y,1), color);

        drawTrianglePoint(x, y, color, 90)
    }

    function drawYPoint(x, y, color) {
        drawLine(x, y, xAxisLowerBound, y, color, 1)

        drawYLabel(y, Code.floatToStringRound(y,1), color);

        drawSquarePoint(x, y, color);
    }

    function drawYLabel(y, text, color) {
        var ctx = internal.context
        var yy = root.mapToPosition(Qt.point(0,y)).y;
        ctx.save();
        ctx.fillStyle = color
        ctx.translate(root.plotArea.x, yy);
        ctx.textAlign = "right";
        ctx.fillText(text, -5, root.labelFontSize/3);
        ctx.restore();
    }

    function drawXLabel(x, text, color) {
        var ctx = internal.context
        var xx = root.mapToPosition(Qt.point(x,0)).x;
        ctx.save();
        ctx.fillStyle = color
        ctx.translate(xx, root.plotArea.y+root.plotArea.height);
        ctx.textAlign = "center";
        ctx.fillText(text, 0, root.labelFontSize);
        ctx.restore();
    }

    function drawText(x, y, text, color) {
        var ctx = internal.context
        var point = root.mapToPosition(Qt.point(x,y));
        ctx.save();
        ctx.fillStyle = color
        ctx.translate(point.x, point.y);
        ctx.textAlign = "center";
        ctx.fillText(text, 0, root.labelFontSize/3);
        ctx.restore();
    }

    function drawLine(startX, startY, endX, endY, color, lineWidth) {
        var ctx = internal.context
        ctx.save();
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = color;
        ctx.beginPath();
        var pointStart = root.mapToPosition(Qt.point(startX,startY));
        var pointEnd = root.mapToPosition(Qt.point(endX,endY));
        ctx.moveTo(pointStart.x,pointStart.y);
        ctx.lineTo(pointEnd.x,pointEnd.y);
        ctx.stroke();
        ctx.restore();
    }

    function drawYCachedZone(startY, endY, color) {
        drawCachedZone(xAxisLowerBound, startY, xAxisUpperBound, endY, color);
    }

    function drawXCachedZone(startX, endX, color) {
        drawCachedZone(startX, yAxisLowerBound, endX, yAxisUpperBound, color);
    }

    function drawCachedZone(startX, startY, endX, endY, color) {
        var ctx = internal.context
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = color
        var pointStart = root.mapToPosition(Qt.point(startX,startY));
        var pointEnd = root.mapToPosition(Qt.point(endX,endY));
        ctx.fillRect(pointStart.x, pointStart.y, pointEnd.x-pointStart.x, pointEnd.y-pointStart.y);
        ctx.stroke();
        ctx.restore();
    }

    function drawTrianglePoint(x, y, color, rotation) {
        var ctx = internal.context
        var point = root.mapToPosition(Qt.point(x,y));
        ctx.save();
        ctx.translate(point.x, point.y);
        ctx.rotate(Code.degToRad(rotation))
        ctx.moveTo(0, 0);
        ctx.lineTo(-10, -10);
        ctx.lineTo(+10, -10);
        ctx.closePath();
        ctx.fillStyle = color;
        ctx.fill();
        ctx.restore();
    }

    function drawSquarePoint(x, y, color) {
        var ctx = internal.context
        var point = root.mapToPosition(Qt.point(x,y));
        ctx.save();
        ctx.moveTo(point.x-5, point.y-5);
        ctx.lineTo(point.x-5, point.y+5);
        ctx.lineTo(point.x+5, point.y+5);
        ctx.lineTo(point.x+5, point.y-5);
        ctx.closePath();
        ctx.fillStyle = color;
        ctx.fill();
        ctx.restore();
    }

    onPlotAreaChanged: repaintCanvas()

    Canvas{
        id: foregroundCanvas
        anchors.fill: root
        contextType: "2d"

        renderStrategy: Canvas.Threaded
        renderTarget: Canvas.FramebufferObject

        onPaint: {
            context.reset();

            // Load font only once since it is a heavy operation
            context.font = '%1px "%2"'.arg(root.labelFontSize).arg(root.labelFontFamily);

            internal.context=context;
            root.foregroundPaint();
        }
    }

    Canvas{
        id: backgroundCanvas
        z: -1
        anchors.fill: root
        contextType: "2d"

        renderStrategy: Canvas.Threaded
        renderTarget: Canvas.FramebufferObject

        onPaint: {
            context.reset();

            // Load font only once since it is a heavy operation
            context.font = '%1px "%2"'.arg(root.labelFontSize).arg(root.labelFontFamily);

            internal.context=context;
            root.backgroundPaint();
        }
    }

    ValueAxis {
        id: axisXId
        min: xAxisLowerBound
        max: xAxisUpperBound

        tickCount: 2
        labelsVisible: true
        labelsColor: root.labelFontColor
        labelsFont.family: root.labelFontFamily
        labelsFont.pixelSize: root.labelFontSize
    }

    ValueAxis {
        id: axisYId
        min: yAxisLowerBound
        max: yAxisUpperBound

        tickCount: 2
        labelsVisible: true
        labelsColor: root.labelFontColor
        labelsFont.family: root.labelFontFamily
        labelsFont.pixelSize: root.labelFontSize
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值