QML Создавать подсказки динамически

Question

Итак, у меня есть круговая диаграмма, которая меняется динамически. Я хочу показать значение каждого среза при наведении мыши на срез, но я не уверен, как создать всплывающую подсказку при срабатывании onHovered. я использую

qt 5.9.1 & import QtQuick.Controls 2.2

ОБНОВЛЕНИЕ: я добавил некоторый код, чтобы объяснить, как я создаю срезы. Вот код:

function onUpdateValues(values){
     switch(values.type){
           case PIE_CHART: 
                createPieChart(values.data);
                break;
           ...
           default:
                console.debug("CHART TYPE ERROR");
                break;
            }
     }
}

function createPieChart(data){
    pieserieschart.clear();
    for (var prop in data) {
        var new_slice =  pieserieschart.append(prop, data[prop]);
        new_slice.tooltip = prop + ": " + data[prop]
        //I tried using hovered signal (and without), but it's not doing any difference
        new_slice.hovered.connect(function(state) { new_slice.tooltip.visible = state })
        //If I replace the above line by the next one, I can see the console.log info, but the tooltip is not enabled
        new_slice.hovered.connect(function(state) { sliceHovered(new_slice, state) })

    }
}

function sliceHovered(slice, value){
    slice.enabled = true
    console.log("Slice hovered: " + slice.tooltip + " " + value)
}

ChartView { /* Chart */
    id:chartView

    PieSeries {
       id: pieserieschart;
       size: 1;
       holeSize: 0.55;
       onClicked: sliceClicked(slice);
    }
}

Я вижу console.log, но не могу увидеть всплывающую подсказку, и в выходных данных приложения не отображается ошибка, но всплывающая подсказка не срабатывает

Answer 1

Соответствующие документы:

• PieSeries:: hovered (срез PieSlice, состояние bool)
• ToolTip:: show (текст строки, int timeout = -1)
• ToolTip:: скрыть ()

Пример:

ChartView {
    id: chartView

    PieSeries {
        onHovered: {
            if (state)
                chartView.ToolTip.show(slice.label + ":" + slice.value)
            else
                chartView.ToolTip.hide()
        }
    }
}

Answer 2

Я знаю, что, возможно, вам это больше не нужно, но поскольку у меня была такая же проблема и я подошел к этому вопросу, я отправлю свое решение для позиции на срезе.

Во-первых, я не использовал chartView.ToolTip, потому что он не позволял мне перемещаться по плоскости... Поэтому я создаю элемент ToolTip{ } с видимостью = false.

Теперь математика в старшей школе того стоила. PieSlice имеет 2 полезных свойства: startAngle (на круге, где начинается круговая диаграмма) и angleSpan (угол, используемый круговой диаграммой). Поскольку у меня есть угол, я могу использовать математическую магию, чтобы найти X и Y.

Сложные детали: угол по часовой стрелке, а геометрия измеряется против часовой стрелки. Итак, мне нужно сначала преобразовать угол с часовой стрелки на противодействие... И начальная точка в геометрии отличается от диаграмм Qt, я должен компенсировать, уменьшив -90 от начала координат...

Поскольку я хочу, чтобы подсказка отображалась в середине среза, я суммирую половину angleSpan с startAngle.

И после многих мучений я понимаю, что Math.cos и Math.sin используют ввод в РАДИАНАХ, а не в градусах. Я преобразовал угол в рад и... все. Надеюсь, это поможет кому-то другому заблудшему вроде меня =) .

      ToolTip{
        id:sliceToolTip
        visible: false;


    }
         onHovered: {
            if (state){


             // 360 + angle clockwise to convert to counter-clw.
             //-90 to compensate the QML charts start point 
                var angle =(360+ (-1*(slice.startAngle-90+(slice.angleSpan/2))));
                if(angle > 360){ //Reduce to one spin, preventing high angles
                  angle -=360;
                }
                angle = (angle*Math.PI)/180; //convert to radians


                var offsetX = Math.cos(angle);
                var offsetY = Math.sin(angle);
                 sliceToolTip.x =  (chartView.width/2 - (sliceToolTip.width/2)) +  ((chartView.width/16)* offsetX*3);
                 sliceToolTip.y = (chartView.height/2 - (sliceToolTip.height/2)) - ((chartView.height/9)*offsetY*3); // My screen is 16:9, so I made a proportion to match the circle, as my charts goes with anchors.centerIn: parent
            }
                     else{
                        sliceToolTip.hide()
            }
        }