QMLチャートのScrolLeftとScrollRightメソッドを使用する方法

Question

私はscrollbarを使用してQTグラフをスクロールする必要があり、そのために、私はドラッグすることができRectangleとMouseAreaを使用して独自のカスタムscrollbarを作成しました。

import QtQuick 2.6 
import QtQuick.Window 2.2 
import QtQuick.Controls 2.2 
import QtCharts 2.0 

Window { 
    id: window 
    width: 640 
    height: 480 
    visible: true 

    ChartView { 
     id: chartview 
     width: parent.width 
     height: 300 

     LineSeries { 
      name: "LineSeries" 
      axisX: ValueAxis { 
       min: 0 
       max: 100 
       tickCount: 12 
       labelFormat: "%.0f" 
      } 

      axisY: ValueAxis { 
       min: 0 
       max: 70 
       tickCount: 5 
       labelFormat: "%.0f" 
      } 
      XYPoint { x: 0; y: 0.0 } 
      XYPoint { x: 1.1; y: 3.2 } 
      XYPoint { x: 1.9; y: 2.4 } 
      XYPoint { x: 2.1; y: 2.1 } 
      XYPoint { x: 2.9; y: 2.6 } 
      XYPoint { x: 3.4; y: 2.3 } 
      XYPoint { x: 200.1; y: 3.1 } 
     } 
    } 

    /* Rectangle base for horizontal scroll bar */ 
    Rectangle{ 
     id:rectHorScrollBase 
     width:parent.width 
     height:parent.height * 0.10 
     anchors.top:chartview.bottom 
     anchors.topMargin: (parent.height * 0.01) 
     color:"transparent" 
     visible: true 

     /* Rectangle indicating scroll path*/ 
     Rectangle { 
      id:rectHorScrollPath 
      width: parent.width 
      height: parent.height 
      anchors.left:parent.left 

      radius: 2 
      color: "lightblue" 
     } 

     /* Actual scroll rectaangle which will be dragged */ 
     Rectangle { 
      id: rectHorScroll 
      property var prevX : 0 

      anchors.top : parent.top 
      width: 50 
      height: parent.height 
      color: "green" 

      /* Mouser area to drag the rectangle and to move Chart */ 
      MouseArea { 
       id:mouseAreaHorScroll 

       anchors.fill: parent 
       drag.target: parent 
       drag.minimumX: 0 
       drag.maximumX: chartview.width - width 
       drag.axis: Drag.XAxis 

       onReleased: { 
        console.log("x in Released ===",rectHorScroll.x) 
        rectHorScroll.prevX = rectHorScroll.x 
       } 
      } 

      onXChanged: { 

       // HOW TO HANDLE THE SCROLL BASED ON x ? 
       if(mouseAreaHorScroll.drag.active) 
       { 
        if(x > prevX) 
        { 
         chartview.scrollRight(x) // NOT WORKING 
        } 
        else 
        { 
         chartview.scrollLeft(x) //NOT WORKING 
        } 
       } 
      } 
     } 
    } 
} 

1）どのようにマップするには：私は/ ChartViewコンテンツX.FollowingとScrollBarXを結合し、私がリンクすることはできませんよScrollRightとScrollLeftメソッドを使用してチャートをスクロールしようとした

コードですscrollBar XとChartViewの内容X？

2）scrollbarは、X軸の最大値と最小値を超えてはいけません。どうやってするか？

3）ScrollBarとChartViewの間に同期がある必要があります。

Answer 1

基本的に期待どおりに動作します。完璧に動作します - xがprevXよりも大きい場合、あなたscrollRight、すべての

onXChanged: { 

    // HOW TO HANDLE THE SCROLL BASED ON x ? 
    if(mouseAreaHorScroll.drag.active) 
    { 
     if(x > prevX) 
     { 
      chartview.scrollRight(x) // NOT WORKING 
     } 
     else 
     { 
      chartview.scrollLeft(x) //NOT WORKING 
     } 
    } 
} 

まず：私たちは、あなたが何をしているかを分析してみましょう。ただし、ピクセルの場合はscrollRight - 動きとともに大きくなるため、動きはスクロールバーの動きに対して線形ではありません。

はscrollLeftは確かに（ほぼ）明白である、呼び出されることはありません：あなたはprevXを更新しないので、場合にのみ、x === 0 (= prevX)あなたscrollLeft(0) - 移動しません。

最初に適用する必要があるのは、ハンドラの最後にprevXを更新することです。
2回目の変更は、コードを最後に実行してからハンドルを移動する限り移動したいということです。

ソリューションは、したがって、次のようになります。

onXChanged: { 

    // HOW TO HANDLE THE SCROLL BASED ON x ? 
    if(mouseAreaHorScroll.drag.active) 
    { 
     if(x > prevX) 
     { 
      chartview.scrollRight(x - prevX) // Only move the difference 
     } 
     else 
     { 
      chartview.scrollLeft(prevX - x) //Only move the difference 
     } 
     prevX = x // Update prevX 
    } 
} 

代わりに、手動でその原料を処理し、これらの機能を呼び出すので、あなたもちょうどは、xに軸の目に見える部分をマッピングすることができます - のためにあなたのハンドルを削除これに応じて軸Xを変更してください：

axisX: ValueAxis { 
    min: rectHorScroll.x/(rectHorScrollBase.width - rectHorScroll.width) * 100 
    max: rectHorScroll.x/(rectHorScrollBase.width - rectHorScroll.width) * 100 + 100 
    tickCount: 12 
    labelFormat: "%.0f" 
} 

ここで、適切な方法でマッピングを適用し、適切な範囲を取得する必要があります。

その後、あなたはまた、スクロールバーをシミュレートするためSliderのように、定期的なコンポーネントを使用することができます。

import QtQuick 2.6 
import QtQuick.Window 2.2 
import QtQuick.Controls 2.0 
import QtCharts 2.0 

ApplicationWindow { 
    id: window 
    width: 640 
    height: 480 
    visible: true 

    ChartView { 
     id: chartview 
     width: parent.width 
     height: 300 

     LineSeries { 
      name: "LineSeries" 
      axisX: ValueAxis { 
       property real minValue: 0 
       property real maxValue: 200 
       property real range: 100 
       min: minValue + sb.position * (maxValue - minValue - range) 
       max: minValue + sb.position * (maxValue - minValue - range) + range 
       tickCount: 12 
       labelFormat: "%.0f" 
      } 

      axisY: ValueAxis { 
       min: 0 
       max: 70 
       tickCount: 5 
       labelFormat: "%.0f" 
      } 
      XYPoint { x: 0; y: 0.0 } 
      XYPoint { x: 1.1; y: 3.2 } 
      XYPoint { x: 1.9; y: 2.4 } 
      XYPoint { x: 2.1; y: 2.1 } 
      XYPoint { x: 2.9; y: 2.6 } 
      XYPoint { x: 3.4; y: 2.3 } 
      XYPoint { x: 200.1; y: 3.1 } 
     } 


    } 

    Slider { 
     id: sb 
     anchors { 
      bottom: parent.bottom 
      left: parent.left 
      right: parent.right 
     } 
     height: 30 
    } 
}