0

I created a program that reads stock data (time series) from the internet and displays it in a QML ChartView. After I add all the line series that I want, I can delete them by clicking a button.

I would like to know if it is possible to delete the line series by clicking at ANY point in the line series?

I am adding the series dynamically like this:

// 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);

I don't want to crowd too much my post so I won't post ALL the files, however:

  • dateTimeAxis_chartView_xAxis is a DateTimeAxis QML type inside the main ChartView QML typ with id: chartView
  • valueAxis_chartView_yAxis is a ValueAxis QML type inside the main ChartView QML typ with id: chartView
  • stockChart is the id of a StockChart QML Type imported from C++

  • lineSeriesClicked is this function:

    function lineSeriesClicked(lineSeriesPoint){
    console.log(lineSeriesPoint);
}

  • lineSeriesHovered is this function:

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

Now, in the log I see all the correct data, e.g., when hovered:

qml: 2017-08-29 -> 64.91115963918442

when clicked:

qml: QPointF(1.50432e+12, 65.0453)

Looking at XYSeries QML Type (https://doc.qt.io/qt-5/qml-qtcharts-xyseries.html#clicked-signal), the clicked signal that I am using only passes the a point.

Is there any way to get the name of the line series where the point data was obtained to be able to delete this series? Perhaps through some sort of context access or "this" keyword?

Thank you very much!!!

4

1 回答 1

1

我不知道你是否解决了这个问题，但只是为了文档......我可以使用模型-视图-委托来解决它。在我的示例中，我使用传感器数据生成图形，我希望我可以通过系列标签连接不同的图形（例如饼图和线）。我可以使用这个模型-视图-委托透视图来做到这一点。我是这样想的：

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 个值，因为我每天都在绘制地图。我希望这有帮助 =)

于 2018-06-12T10:50:42.957 回答