[TrueChart for ASP.NET] 折れ線グラフのラインがデータ点をはみ出してしまいます。 – MESCIUS ナレッジベース

作成日: 2014/09/26 最終更新日: 2014/10/02

文書種別

技術情報

詳細

折れ線グラフのラインが鋭角で折り返す場合、線の幅が太くなるにつれ、本来の座標よりも外側の部分にはみ出して描画されてしまいます。
これは、GDI+のGraphicsオブジェクトにおいて、直線の接合方法がデフォルトで鋭角接合（LineJoin.Miter）である為です。

C1WebChart.DrawDataSeriesイベントを実装し、折れ線の描画に使用するPenのLineJoinプロパティを「Bevel」や「Round」に設定することで、現象を回避できます。

※この方法により、データセット（Series）の線の設定内容はPenオブジェクトによって上書きされる為、線の種類／色／太さは、改めて設定し直す必要があります。

◆サンプルコード

[VB]

Private Sub C1WebChart1_DrawDataSeries(ByVal sender As System.Object, _
ByVal e As C1.Win.C1Chart.DrawDataSeriesEventArgs) Handles C1WebChart1.DrawDataSeries
　　'接合方法を変更するデータセットを判断します
　　If e.SeriesIndex = 0 Then
　　　　Dim pen As New Pen(Color.Red, 3)

　　　　'鋭角接合（デフォルト：はみ出しが発生します）
　　　　'pen.LineJoin = System.Drawing.Drawing2D.LineJoin.Miter

　　　　'面取り接合（現象を回避できます）
　　　　pen.LineJoin = System.Drawing.Drawing2D.LineJoin.Bevel

　　　　'角丸接合（現象を回避できます）
　　　　'pen.LineJoin = System.Drawing.Drawing2D.LineJoin.Round

　　　　e.Pen = pen
　　End If
End Sub

[C#]

protected void C1WebChart1_DrawDataSeries(object sender, C1.Win.C1Chart.DrawDataSeriesEventArgs e)
{
　　//接合方法を変更するデータセットを判断します
　　if (e.SeriesIndex == 0)
　　{
　　　　Pen pen = new Pen(Color.Red, 3);
　　　　
　　　　//鋭角接合（デフォルト：はみ出しが発生します）
　　　　//pen.LineJoin = System.Drawing.Drawing2D.LineJoin.Miter;
　　　　
　　　　//面取り接合（現象を回避できます）
　　　　pen.LineJoin = System.Drawing.Drawing2D.LineJoin.Bevel;
　　　　
　　　　//角丸接合（現象を回避できます）
　　　　//pen.LineJoin = System.Drawing.Drawing2D.LineJoin.Round;
　　　　
　　　　e.Pen = pen;
　　}
}

旧文書番号

69789