首页 文章

单击LineSeries时,获取QML ChartView LineSeries的名称

提问于
浏览
0

我创建了一个程序,从Internet读取库存数据(时间序列)并将其显示在QML ChartView中 . 在我添加了我想要的所有系列之后,我可以通过单击按钮删除它们 .

我想知道是否可以通过点击系列中的任何一点来删除线系列?

我正在动态添加这个系列:

// stockID is sent from C++ when the timeSeriesReady signal is emitted
var chartViewSeries = chartView.createSeries(ChartView.SeriesTypeLine, stockID, dateTimeAxis_chartView_xAxis, valueAxis_chartView_yAxis);

// Set chartViewSeries (AbstractSeries/LineSeries) properties
chartViewSeries.onClicked.connect(lineSeriesClicked);
chartViewSeries.onHovered.connect(lineSeriesHovered);

stockChart.setLineSeries(chartViewSeries);

我不想过多地张贴我的帖子所以我不会发布所有文件,但是:

  • dateTimeAxis_chartView_xAxis是主要ChartView QML typ中的DateTimeAxis QML类型,带有id:chartView

  • valueAxis_chartView_yAxis是ChartView QML内部的ValueAxis QML类型,带有id:chartView

  • stockChart是从C导入的StockChart QML类型的ID

  • lineSeriesClicked是这个函数:

function lineSeriesClicked(lineSeriesPoint){
    console.log(lineSeriesPoint);
}
  • lineSeriesHovered是这个函数:
function lineSeriesHovered(lineSeriesPoint, isHovered){
    if(isHovered){
        var date = new Date(lineSeriesPoint.x);
        console.log(date.getFullYear() + "-" + (((date.getMonth()+1) < 10) ? ("0" + (date.getMonth()+1).toString()) : (date.getMonth()+1)) + "-" + (((date.getDate()) < 10) ? ("0" + (date.getDate()).toString()) : (date.getDate())) + " -> " + lineSeriesPoint.y);
    }
}

现在,在日志中我看到所有正确的数据,例如,当盘旋时:

qml: 2017-08-29 -> 64.91115963918442

点击时:

qml: QPointF(1.50432e+12, 65.0453)

查看XYSeries QML Type(https://doc.qt.io/qt-5/qml-qtcharts-xyseries.html#clicked-signal),我使用的点击信号只传递一个点 .

有没有办法获得获得点数据的系列名称能够删除这个系列?也许通过某种上下文访问或“this”关键字?

非常感谢你!!!

1 回答

  • 1

    我不知道你是否解决了这个问题,但仅仅是为了文档...我可以使用model-view-delegate来解决它 . 在我的例子中,我使用传感器数据生成图形,我希望我可以通过Series'标签连接不同的图形(例如饼图和线条) . 我可以使用这个model-view-delegate透视图来完成它 . 我这样想出来:

    import QtQuick 2.2
    import QtQuick.Controls 2.3
    import QtQuick.Window 2.10
    import QtQuick.Layouts 1.3
    import QtDataVisualization 1.2
    import QtCharts 2.2
    import Qt3D.Input 2.0
    // I imported more than I used because it's a part of a big project...
    Item{
        id: mainWindow
    
        ListModel{
            id: jsonData
            Component.onCompleted: // line
            {
    
                //create a request and tell it where the json that I want is
                var req = new XMLHttpRequest();
                var location = "URL-to-JSON-DATA"
    
                //tell the request to go ahead and get the json
    
                req.open("GET", location, true);
                req.send(null);
    
                //wait until the readyState is 4, which means the json is ready
                req.onreadystatechange = function()
    
                {
                    console.log("Req status:"+req.status+"("+req.readyState+")");
                    if (req.readyState == 4)
                    {
                        //turn the text in a javascript object while setting the ListView's model to it
                        if (req.responseText){
                            var result = JSON.parse(req.responseText);
                            for (var i =0; i < result.rows.length;i++){
                                // map the Json to a model
    
                                jsonData.append({"sensor":result['rows'][i]['value'][0],"activePower": result['rows'][i]['value'][1],"voltage":result['rows'][i]['value'][2], "current":result['rows'][i]['value'][3], "year":result['rows'][i]['key'][0],"month": result['rows'][i]['key'][1],"day":result['rows'][i]['key'][2], "hour":result['rows'][i]['key'][3], "minute":result['rows'][i]['key'][4] })
    
    
                            };
                            //Sucess string
                            console.log("JSON [Sensor,Date,Hour] loaded");
                            //Fail string :(
                        } else {console.log("Empty[Sensor,Date,Hour JSON");}
                    }
                }
    
            }
    
    
    
    
        }
    
        ChartView {
            title: "Line"
            id: mainChart
            anchors.fill: parent
            antialiasing: true
    
            Repeater{
                model: jsonData
                Item {
                    Component.onCompleted: {
    
                        if( mainChart.series(sensor)) {
                            mainChart.series(sensor).append(10,activePower);
                        } else{
                            mainChart.createSeries(ChartView.SeriesTypeLine,sensor,lineXOrdinate,lineYOrdinate );
                            mainChart.series(sensor).append(hour+(minute*0.5)/30,activePower);
                            mainChart.series(sensor).hovered.connect(
                                                                        function (point,state){
                                                                            if (state){
                                                                                console.log(">>>"+sensor); // print the Series label =D
    
    
                                                                            } 
    
    
                                                                        });
    
    
                        }
                        if(activePower > lineYOrdinate.max){ // if the highest value is above the Y axis, reset it to value+10
                            lineYOrdinate.max = activePower +10;
                        }
    
                    }
                }
            }
    
        }
    
    
    
    
    
    
        ValueAxis {
            id: lineYOrdinate
            min:0
            max:11
        }
    
        ValueAxis {
            id: lineXOrdinate
            min:0
            max:24
        }
    
    
    }
    

    X轴是24个值,因为我正在映射一天 . 我希望这个帮助=)

相关问题