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

相关文档：

示例：

ChartView {
    id: chartView

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

Answer 2

我知道也许你不再需要这个了，但由于我遇到了同样的问题并遇到了这个问题，我会post我的解决方案到切片上的位置。

首先，我没有使用chartView.ToolTip，因为它不允许我在平面上移动...所以我制作了一个ToolTip{ }元素，visibility = false。

高中数学现在值得了。 PieSlice 有 2 个有用的属性：startAngle（在圆上，饼图开始的地方）和 angleSpan（饼图使用的角度）。由于我有角度，我可以使用一些数学魔法来找到 X 和 Y。

棘手的部分：角度是顺时针的，几何东西是逆时针测量的。所以我必须首先将角度从顺时针方向转换为逆向...并且几何中的起点与 Qt Charts 不同，我必须通过从原点减少 -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()
            }
        }

QML 动态创建工具提示

QML Create tooltips dynamically

javascript

tooltip

qml

qtquick2

qtquickcontrols2