2

フレックス チャートでは、データヒント情報を表示するボックスをカスタマイズできますが、データヒント ボックスの横に表示される小さな円を簡単に変更する方法はありますか?

http://help.adobe.com/en_US/flex/using/images/chd_SimpleDataTip.png

円の描画を行うように見える ChartBase のメソッド positionDataTips() を見つけました。LineChart をサブクラス化し、修正したバージョンでメソッドをオーバーライドするつもりでした。ただし、このメソッドは、ChartBase のみがアクセスできる多くのプライベート インスタンス変数にアクセスする必要があります。

考え？

4

1 に答える 1

4

私は、チャートのデータチップに関連するこの問題やその他の問題に対処するために非常に長い週を費やしました。私はあなたが見ることができる同様の質問で同様の質問に対する答えを持っています。質問への回答としてマークされていないため、その回答の修正版をここに投稿します:-(

ChartBase.positionDataTips2つの大規模な関数をオーバーライドする方法についての適切なドキュメントはありませんChartBase.positionAllDataTips。フレックスチャートを自分の意志に合わせて曲げるために、これらの関数をオーバーライドする最良の方法を決定するために、mxチャートコードを掘り下げて何日も費やしました:-P

これは、データチップターゲットをカスタマイズするための（苦労して得た）コードです。これは、一連のマウスにカーソルを合わせると表示されるデフォルトのくまです。

  1. 拡張する新しいチャートクラスChartBaseまたはその子を作成します。
  2. ChartBaseスタイルshowDataTipTargets、、をfalseに設定します。
  3. showCustomDataTipTargetsカスタムチャートクラスに 新しいスタイルを作成します。
    • dataTipTargetRendererカスタムレンダリングを行うためのスタイルを作成することもできます。これは、はるかに洗練されたソリューションになります。
  4. オーバーライドpositionDataTipsしてpositionAllDatatips
    • 正方形を描くコードを書きましたが、より大きな円を作るには、との代わりに独自の値を使用するだけTOOLTIP_TARGET_RADIUSですTOOLTIP_TARGET_INNER_RADIUS。

新しいオーバーライドされた関数は次のようになります。

override protected function positionDataTips():void
{
  // Setting the showDataTipTargets to false will prevent 
  // super.positionDataTips() from drawing the default bulls-eyes.
  // By setting this style, we allow super.positionDataTips() to do all 
  // the "heavy-lifting" involved with dataTip positioning and dataTip box rendering
  // before we do our customization of the dataTipTargets
  this.setStyle("showDataTipTargets", false);

  // this will do all the normal rendering of the datatips and callout
  // but it will not draw the dataTipTarget because that is dependent upon
  // the style, showDataTipTargets
  super.positionDataTips();

  // now here you draw your custom datatip target. 
  // Use the code from ChartBase.positionDataTips as a guide, 
  // I have written code to simply draw a square instead of circle.
  // You can do much more complex things here as needed.
  if (len > 1)
  {
    // calloutStroke code is copied verbatim from super function
    // However, you can customize the calloutStroke rendering just as easily
    // by modifying the following code!
    if (calloutStroke)
    {
      calloutStroke.apply(g,null,null);

      if (tipData.isRight)
      {                   
        g.moveTo(chartLocalPts.x,
                chartLocalPts.y + tipData.height /  2);
        g.lineTo(tipData.x,
                chartLocalPts.y + tipData.height / 2);
        g.lineTo(tipData.x, tipData.y);
      }
      else
      {
        if(layoutDirection == LayoutDirection.RTL)
        {
        g.moveTo(chartLocalPts.x - tipData.width,
        chartLocalPts.y + tipData.height / 2);
        }
        else
        {
        g.moveTo(chartLocalPts.x + tipData.width,
        chartLocalPts.y + tipData.height / 2);
        }
          g.lineTo(tipData.x,
                  chartLocalPts.y + tipData.height / 2);
          g.lineTo(tipData.x, tipData.y);
        }
    }
  }

  // Here is custom dataTipTarget code!!
  // It draws a 5x5 square around the point on the series
  var tipColor:uint = tipData.hd.contextColor;
  g.lineStyle(1, tipColor, 100);
  g.moveTo(tipData.x, tipData.y);
  g.beginFill(0xFFFFFF, 1);
  g.drawRect(tipData.x, tipData.y, 5, 5);
  g.endFill();

}

ChartBase.positionDataTip()以下は、参照用にコピーされたコードです。

  if (len > 1)
  {
    if (calloutStroke)
    {
      calloutStroke.apply(g,null,null);

      if (tipData.isRight)
      {                   
        g.moveTo(chartLocalPts.x,
                chartLocalPts.y + tipData.height /  2);
        g.lineTo(tipData.x,
                chartLocalPts.y + tipData.height / 2);
        g.lineTo(tipData.x, tipData.y);
      }
      else
      {
        if(layoutDirection == LayoutDirection.RTL)
        {
        g.moveTo(chartLocalPts.x - tipData.width,
        chartLocalPts.y + tipData.height / 2);
        }
        else
        {
        g.moveTo(chartLocalPts.x + tipData.width,
        chartLocalPts.y + tipData.height / 2);
        }
          g.lineTo(tipData.x,
                  chartLocalPts.y + tipData.height / 2);
          g.lineTo(tipData.x, tipData.y);
        }
    }
  }

  var tipColor:uint = tipData.hd.contextColor;
  g.lineStyle(1, tipColor, 100);
  g.moveTo(tipData.x, tipData.y);
  g.beginFill(0xFFFFFF, 1);
  g.drawCircle(tipData.x, tipData.y, TOOLTIP_TARGET_RADIUS);
  g.endFill();

  g.beginFill(tipColor, 1);
  g.drawCircle(tipData.x, tipData.y,
            TOOLTIP_TARGET_INNER_RADIUS);
  g.endFill();
于 2012-02-13T15:49:57.970 に答える