範囲セレクタ

FinancialChartのRangeSelectorを使用すると、ユーザーはチャートに表示する特定の範囲のデータを選択できます。ユーザーは、さまざまなタイプの財務チャートに簡単にRangeSelectorを連結できます。これは主に金融業界で、さまざまなデータ範囲に対して株価の分析を実行するために使用されています。

RangeSelectorには左サム（最小値用）と右サム（最大値用）があり、チャートの特定の時間をスクロールできます。ユーザーはRangeSelectorの最小値と最大値を変更し、これらのサムを左側や右側にドラッグして、チャート上でのデータの表示範囲を調整できます。範囲バーでサムを左にドラッグすると値が減少し、右にドラッグする範囲バーの値が増加します。

コードで最小値と最大値の範囲を設定するには、RangeSelectorのMinプロパティとMaxプロパティを使用します。

RangeSelectorのOrientationプロパティをX（デフォルト）またはYに設定することで、サムの位置を変更できます。

C#	コードのコピー
.Orientation(C1.Web.Mvc.Chart.Orientation.Y)

向きをYに設定すると、左サムと右サムはRangeSelectorで下サムおよび上サムとして位置が決定されます。これを上下にドラッグすることで値を増減でき、チャートに表示されるデータの範囲を指定できます。

次の図は、RangeSelectorが追加された後のFinancialChartを示しています。

次のコード例は、範囲セレクタを使用してFinancialChartにサム値を表示する方法を示します。

コードの場合

HTML

HTML	コードのコピー
@using C1.Web.Mvc.Chart; @model List<FinanceData> <script type="text/javascript"> var tooltipContent = function (ht) { 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() + '<br/>' } }; function rangeChangedHandler(sender, e) { var stChart = wijmo.Control.getControl("#FinancialChart"), rs = c1.getExtender(wijmo.Control.getControl("#rs"), "RangeSelector"), yRange; if (stChart && rs) { // メインチャートのx範囲とy範囲を更新します yRange = findRenderedYRange(stChart.collectionView.sourceCollection, rs.min, rs.max); stChart.axisX.min = rs.min; stChart.axisX.max = rs.max; stChart.axisY.min = yRange.min; stChart.axisY.max = yRange.max; stChart.invalidate(); } } </script> <c1-financial-chart id="FinancialChart" binding-x="X" chart-type="C1.Web.Mvc.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="tooltipContent"></c1-flex-chart-tooltip> </c1-financial-chart> <c1-financial-chart id="rs" binding-x="X" chart-type="C1.Web.Mvc.Finance.ChartType.CandleVolume" height="150px"> <c1-items-source source-collection="Model"></c1-items-source> <c1-financial-chart-series binding="High,Low,Open,Close,Volume"></c1-financial-chart-series> <c1-range-selector range-changed="rangeChangedHandler" id="RangeSelector"></c1-range-selector> <c1-flex-chart-tooltip content=""></c1-flex-chart-tooltip> </c1-financial-chart>

HTML

コードのコピー

@using C1.Web.Mvc.Chart;
@model List<FinanceData>
<script type="text/javascript">
    var tooltipContent = function (ht) {
        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() + '<br/>'
        }
    };
    function rangeChangedHandler(sender, e) {
        var stChart = wijmo.Control.getControl("#FinancialChart"),
            rs = c1.getExtender(wijmo.Control.getControl("#rs"), "RangeSelector"),
            yRange;
        if (stChart && rs) {
            // メインチャートのx範囲とy範囲を更新します
            yRange = findRenderedYRange(stChart.collectionView.sourceCollection,
                                                rs.min, rs.max);
            stChart.axisX.min = rs.min;
            stChart.axisX.max = rs.max;
            stChart.axisY.min = yRange.min;
            stChart.axisY.max = yRange.max;
            stChart.invalidate();
        }
    }
    
</script>
<c1-financial-chart id="FinancialChart"  binding-x="X" chart-type="C1.Web.Mvc.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="tooltipContent"></c1-flex-chart-tooltip>
</c1-financial-chart>
<c1-financial-chart id="rs" binding-x="X" chart-type="C1.Web.Mvc.Finance.ChartType.CandleVolume" height="150px">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-financial-chart-series binding="High,Low,Open,Close,Volume"></c1-financial-chart-series>
<c1-range-selector range-changed="rangeChangedHandler" id="RangeSelector"></c1-range-selector>
<c1-flex-chart-tooltip content=""></c1-flex-chart-tooltip>
</c1-financial-chart>