3

私は、グラフにマーカーを作成するオープン ソースのチャート作成ライブラリを使用しています。(動的データ表示) 私が作成しているマーカーは Rect オブジェクトで作成されています。System.Windows.Shapes のすべての Shape には ToolTip プロパティがありますが、System.Windows.Rect にはありません。マウスがマーカーの上に置かれたときにマーカーの価格値をユーザーに知らせるツールチップがポップアップ表示されるようにしたいと考えています。四角形が占める領域にマウスが入ったときにツールチップを作成してポップアップすることを考えていましたが、四角形がチャートによってズーム/パンされることを考慮して、それがどのように可能かはわかりません。他の提案はありますか？

これが私が作成しているマーカーのコードです (Felice Pollano ブログから)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Shapes;
using System.Windows.Controls;
using System.Text;
using System.Windows;
using System.Windows.Media;

namespace Microsoft.Research.DynamicDataDisplay.PointMarkers
{
public class CandleStickPointMarker:ShapePointMarker,ITransformAware
{
    public double CandlestickWidth
    {
        get { return (double)GetValue(CandlestickWidthProperty); }
        set { SetValue(CandlestickWidthProperty, value); }
    }
    public static readonly DependencyProperty CandlestickWidthProperty =
        DependencyProperty.Register("CandlestickWidth", typeof(double), typeof(CandleStickPointMarker), new UIPropertyMetadata(4.0));
    public double CandlestickStrokeWidth
    {
        get { return (double)GetValue(CandlestickStrokeWidthProperty); }
        set { SetValue(CandlestickStrokeWidthProperty, value); }
    }

    public static readonly DependencyProperty CandlestickStrokeWidthProperty =
        DependencyProperty.Register("CandlestickStrokeWidth", typeof(double), typeof(CandleStickPointMarker), new UIPropertyMetadata(1.0));
    public Brush WhiteCandleFill
    {
        get { return (Brush)GetValue(WhiteCandleFillProperty); }
        set { SetValue(WhiteCandleFillProperty, value); }
    }

    public static readonly DependencyProperty WhiteCandleFillProperty =
        DependencyProperty.Register("WhiteCandleFill", typeof(Brush), typeof(CandleStickPointMarker), new UIPropertyMetadata(Brushes.White));



    public Brush WhiteCandleStroke
    {
        get { return (Brush)GetValue(WhiteCandleStrokeProperty); }
        set { SetValue(WhiteCandleStrokeProperty, value); }
    }

    public static readonly DependencyProperty WhiteCandleStrokeProperty =
        DependencyProperty.Register("WhiteCandleStroke", typeof(Brush), typeof(CandleStickPointMarker), new UIPropertyMetadata(Brushes.DarkGray));



    public Brush BlackCandleFill
    {
        get { return (Brush)GetValue(BlackCandleFillProperty); }
        set { SetValue(BlackCandleFillProperty, value); }
    }
    public static readonly DependencyProperty BlackCandleFillProperty =
        DependencyProperty.Register("BlackCandleFill", typeof(Brush), typeof(CandleStickPointMarker), new UIPropertyMetadata(Brushes.Black));
    public Brush BlackCandleStroke
    {
        get { return (Brush)GetValue(BlackCandleStrokeProperty); }
        set { SetValue(BlackCandleStrokeProperty, value); }
    }

    public static readonly DependencyProperty BlackCandleStrokeProperty =
        DependencyProperty.Register("BlackCandleStroke", typeof(Brush), typeof(CandleStickPointMarker), new UIPropertyMetadata(Brushes.Gray));
    public CoordinateTransform Transform { get; set; }
    public double High
    {
        get { return (double)GetValue(HighProperty); }
        set { SetValue(HighProperty, value); }
    }

    public static readonly DependencyProperty HighProperty =
        DependencyProperty.Register("High", typeof(double), typeof(CandleStickPointMarker), new UIPropertyMetadata(0.0));

    public double Low
    {
        get { return (double)GetValue(LowProperty); }
        set { SetValue(LowProperty, value); }
    }

    public static readonly DependencyProperty LowProperty =
        DependencyProperty.Register("Low", typeof(double), typeof(CandleStickPointMarker), new UIPropertyMetadata(0.0));


    public double Open
    {
        get { return (double)GetValue(OpenProperty); }
        set { SetValue(OpenProperty, value); }
    }

    public static readonly DependencyProperty OpenProperty =
        DependencyProperty.Register("Open", typeof(double), typeof(CandleStickPointMarker), new UIPropertyMetadata(0.0));


    public override void Render(System.Windows.Media.DrawingContext dc, Point screenPoint)
    {
        Point screenOpen = GetScreenPoint(Open,screenPoint.X);
        Point screenHigh = GetScreenPoint(High,screenPoint.X);
        Point screenLow = GetScreenPoint(Low, screenPoint.X);
        //screenPoint is the CLOSE by gentleman agreement.
        var close = screenPoint.ScreenToData(Transform).Y;
        Pen strokePen;
        if (Open >= close) // black
        {
            strokePen = new Pen(BlackCandleStroke, CandlestickStrokeWidth);
            var h = -screenOpen.Y + screenPoint.Y;
            Rect blkRect = new Rect(screenPoint.X - CandlestickWidth / 2, screenOpen.Y, CandlestickWidth, h);                       
            dc.DrawRectangle(BlackCandleFill,strokePen, blkRect);
            dc.DrawLine(strokePen, screenLow, screenPoint);
            dc.DrawLine(strokePen, screenHigh, screenOpen);
        }
        else // white
        {
            strokePen=new Pen(WhiteCandleStroke, CandlestickStrokeWidth);
            var h = screenOpen.Y - screenPoint.Y;
            Rect whtRect = new Rect(screenPoint.X - CandlestickWidth / 2, screenPoint.Y, CandlestickWidth, h);
            dc.DrawRectangle(WhiteCandleFill, strokePen, whtRect);
            dc.DrawLine(strokePen, screenLow, screenOpen);
            dc.DrawLine(strokePen, screenHigh, screenPoint);
        }
    }

    private Point GetScreenPoint(double Open,double screenX)
    {
        Point screen = new Point(0, Open);
        return new Point(screenX,screen.DataToScreen(Transform).Y);
    }
}

}

4

3 に答える 3

6

これが役に立つかどうかはわかりませんが、ローソク足マーカーは長方形のマーカーに似ているはずです。以下のコードは、CircleElementPointMarker と同様の方法で Polygon クラスを使用し、ツールチップ機能を使用して、D3 で四角形マーカー (実際には正方形) を作成する方法を示しています。

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;

namespace Microsoft.Research.DynamicDataDisplay.PointMarkers
{
    /// <summary>Adds Rectangle element at every point of graph</summary>
    public class RectangleElementPointMarker : ShapeElementPointMarker
    {
        Polygon Rectangle;

        public override UIElement CreateMarker()
        {
            Rectangle = new Polygon();
            Rectangle.Stroke = (Pen != null) ? Pen.Brush : Brushes.White;
            Rectangle.StrokeThickness = (Pen != null) ? Pen.Thickness : 0;
            Rectangle.Fill = Fill;
            Rectangle.HorizontalAlignment = HorizontalAlignment.Center;
            Rectangle.VerticalAlignment = VerticalAlignment.Center;
            Rectangle.Width = Size;
            Rectangle.Height = Size;

            Point Point1 = new Point(-Rectangle.Width / 2, -Rectangle.Height / 2);
            Point Point2 = new Point(-Rectangle.Width / 2, Rectangle.Height / 2);
            Point Point3 = new Point(Rectangle.Width / 2, Rectangle.Height / 2);
            Point Point4 = new Point(Rectangle.Width / 2, -Rectangle.Height / 2);
            PointCollection myPointCollection = new PointCollection();
            myPointCollection.Add(Point1);
            myPointCollection.Add(Point2);
            myPointCollection.Add(Point3);
            myPointCollection.Add(Point4);
            Rectangle.Points = myPointCollection;

            if (!String.IsNullOrEmpty(ToolTipText))
            {
                ToolTip tt = new ToolTip();
                tt.Content = ToolTipText;
                Rectangle.ToolTip = tt;
            }

            return Rectangle;
        }

        public override void SetPosition(UIElement marker, Point screenPoint)
        {

            Canvas.SetLeft(marker, screenPoint.X - Size / 2);
            Canvas.SetTop(marker, screenPoint.Y - Size / 2);
        }
    }
}

コードは.NET 4.0、VS2010でコンパイルされました

于 2012-12-12T12:56:14.083 に答える
2

1 つのオプションは、Rectangleの代わりに使用することですRect。

もう 1 つのオプションは、プロパティを使用Pathして に設定することです。DataRectangleGeometry

の MSDN 記事は次のとおりですRectangleGeometry。

于 2012-10-24T18:20:28.530 に答える
2

これを実現する最も簡単な方法は、次の手順に従うことです。

  1. DC領域の上にCanvas（tooltipLayerという名前）を作成します（幅と高さ、境界はdcと同じです）。
  2. dc の四角形ごとに、1 つのキャンバス (tooltipContainers という名前) を tooltipLayer に追加します。
  3. 各 tooltipContainer の幅と高さはゼロに等しく、Margin は "X,Y,0,0" に等しく、X と Y は対応する四角形の X と Y であり、子要素として 1 つの境界線もあります。
  4. 各境界線は、対応する長方形と同じ幅と高さを持ち、背景をほとんど見えないもの (「#01000000」など) に設定する必要があります。
  5. 各境界線にツールチップを追加
于 2012-10-24T18:45:20.320 に答える