ラインマーカー

マーカーは、マウスがデータ系列の上に置かれたときにデータポイントを表示するために使用されるシンボルです。FinancialChartでは、AddLineMarkerメソッドを使用してラインマーカーを追加できます。LineMarkerLinesプロパティを使用すると、次のようにラインマーカーを設定できます。

Vertical：縦方向のラインマーカーを表示します。
Horizontal：横方向のラインマーカーを表示します。
Both：縦方向および横方向のラインマーカーを設定します。
None：ラインを表示しません。

次の図は、FinancialChartのデータポイントの値を表示するためにLineMarkerLinesプロパティをBoth（十字線効果）に設定したときのFinancialChartを示しています。

次のコード例は、ラインマーカーとマーカーコンテンツをFinancialChartに追加する方法を示します。この例では、「クイックスタート」セクションで作成したサンプルを使用します。

HTML

HTML	コードのコピー
@using C1.Web.Mvc.Chart; @model List@using C1.Web.Mvc.Chart; @model List<FinanceData> <script type="text/javascript"> function lineMarkerContent(ht, pt) { var item = ht.series.collectionView.items[ht.pointIndex]; if (item) { return 'Date: ' + wijmo.Globalize.format(ht.x, 'MM月-dd日') + '<br/>' + 'High: ' + item.High.toFixed() + '<br/>' + 'Low: ' + item.Low.toFixed() + '<br/>' + 'Open: ' + item.Open.toFixed() + '<br/>' + 'Close: ' + item.Close.toFixed() + '<br/>' + 'Volume: ' + item.Volume.toFixed(); } } </script> <c1-financial-chart binding-x="X" chart-type="C1.Web.Mvc.chart.Finance.ChartType.CandleVolume"> <c1-items-source source-collection="Model"></c1-items-source> <c1-financial-chart-series binding="High,Low,Open,Close,Volume"></c1-financial-chart-series> <c1-flex-chart-tooltip content=""></c1-flex-chart-tooltip> <c1-line-marker id="LineMarker" alignment="LineMarkerAlignment.Auto" lines="LineMarkerLines.Both" drag-content="true" interaction="LineMarkerInteraction.Move" content="lineMarkerContent"></c1-line-marker> </c1-financial-chart>FinanceData>

HTML

コードのコピー

@using C1.Web.Mvc.Chart;
@model List@using C1.Web.Mvc.Chart;
@model List<FinanceData>


<script type="text/javascript"> 
    function lineMarkerContent(ht, pt) {
        var item = ht.series.collectionView.items[ht.pointIndex];
        if (item) {
            return 'Date: ' + wijmo.Globalize.format(ht.x, 'MM月-dd日') + '<br/>' +
                                'High: ' + item.High.toFixed() + '<br/>' +
                                'Low: ' + item.Low.toFixed() + '<br/>' +
                                'Open: ' + item.Open.toFixed() + '<br/>' +
                                'Close: ' + item.Close.toFixed() + '<br/>' +
                                'Volume: ' + item.Volume.toFixed();
        }
    }
</script>
<c1-financial-chart binding-x="X" chart-type="C1.Web.Mvc.chart.Finance.ChartType.CandleVolume">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-financial-chart-series binding="High,Low,Open,Close,Volume"></c1-financial-chart-series>
<c1-flex-chart-tooltip content=""></c1-flex-chart-tooltip>
<c1-line-marker id="LineMarker" alignment="LineMarkerAlignment.Auto" lines="LineMarkerLines.Both" drag-content="true" interaction="LineMarkerInteraction.Move" content="lineMarkerContent"></c1-line-marker>
</c1-financial-chart>FinanceData>