FlexChartでは、ズームとパンという2種類のチャート操作を行うことができます。ズーム機能とパン機能は、データ量が大きい場合に特に重要です。ズームを使用すると、選択したチャート領域を拡大または縮小して表示できます。また、パンを使用すると、チャート領域内をナビゲートできます。
次のコード例は、FlexChartにズームおよびパン機能を追加する方法を示します。この例では、「クイックスタート」セクションで作成したサンプルを使用します。ズームアクションを実行するには、チャート領域を選択してズームインするか、マウスホイールでスクロールしてズーム領域をズームイン/アウトします。パンを実行するには、チャート領域内でクリックしてドラッグします。
| Razor |
コードのコピー
|
|---|---|
@using C1MvcWebAppZoomPan.Models;
@using C1.Web.Mvc.Chart;
@model IEnumerable<FruitSale>
<script>
var mouseActionControl, axesControl, scalingChart, chartZoom;
c1.documentReady(function () {
mouseActionControl = "Zoom";
axesControl = "X";
scalingChart = wijmo.Control.getControl("#scalingChart");
scalingChart.plotMargin = 'NaN NaN NaN 80';
chartZoom = new wijmo.chart.interaction.ChartGestures(scalingChart);
chartZoom.mouseAction = wijmo.chart.interaction.MouseAction.Zoom;
chartZoom.mouseActionControl = wijmo.chart.interaction.InteractiveAxes.X;
if (navigator.userAgent.match(/iPad/i) != null || /Android/i.test(navigator.userAgent)) {
document.querySelector('#mouseAction').style.display = 'none';
}
chartZoom.rangeChanged.addHandler(function () {
document.querySelector('#reset').disabled = undefined;
});
window.setTimeout(function () {
scalingChart.axisX.min = new Date(2014, 4, 1);
scalingChart.axisY.min = 24;
}, 200);
});
function setMouseAction(sender) {
mouseActionControl.header = "Mouse Action: <b>" + sender.selectedItem.Header + "</b>";
chartZoom.mouseAction = wijmo.chart.interaction.MouseAction[sender.selectedItem.Header];
}
function setInteractiveAxes(sender) {
axesControl.header = "Interactive Axes: <b>" + sender.selectedItem.Header + "</b>";
chartZoom.interactiveAxes = wijmo.chart.interaction.InteractiveAxes[sender.selectedItem.Header];
}
function resetAxes() {
if (chartZoom) {
chartZoom.reset();
if (scalingChart) {
scalingChart.axisX.min = new Date(2014, 4, 1);
scalingChart.axisY.min = 24;
}
}
document.querySelector('#reset').disabled = 'disabled';
}
</script>
@(Html.C1().FlexChart()
.Bind("Date", Model)
.Id("scalingChart")
.ChartType(C1.Web.Mvc.Chart.ChartType.Area)
.Series(sers =>
{
sers.Add()
.Binding("SalesInUSA")
.Name("Sales in USA");
})
)
|
|
| HTML |
コードのコピー
|
|---|---|
@using C1MvcWebAppZoomPan.Models;
@using C1.Web.Mvc.Chart;
@model IEnumerable<FruitSale>
<script>
var mouseActionControl, axesControl, scalingChart, chartZoom;
c1.documentReady(function () {
mouseActionControl = "Zoom";
axesControl = "X";
scalingChart = wijmo.Control.getControl("#scalingChart");
scalingChart.plotMargin = 'NaN NaN NaN 80';
chartZoom = new wijmo.chart.interaction.ChartGestures(scalingChart);
chartZoom.mouseAction = wijmo.chart.interaction.MouseAction.Zoom;
chartZoom.mouseActionControl = wijmo.chart.interaction.InteractiveAxes.X;
if (navigator.userAgent.match(/iPad/i) != null || /Android/i.test(navigator.userAgent)) {
document.querySelector('#mouseAction').style.display = 'none';
}
chartZoom.rangeChanged.addHandler(function () {
document.querySelector('#reset').disabled = undefined;
});
window.setTimeout(function () {
scalingChart.axisX.min = new Date(2014, 4, 1);
scalingChart.axisY.min = 24;
}, 200);
});
function setMouseAction(sender) {
mouseActionControl.header = "Mouse Action: <b>" + sender.selectedItem.Header + "</b>";
chartZoom.mouseAction = wijmo.chart.interaction.MouseAction[sender.selectedItem.Header];
}
function setInteractiveAxes(sender) {
axesControl.header = "Interactive Axes: <b>" + sender.selectedItem.Header + "</b>";
chartZoom.interactiveAxes = wijmo.chart.interaction.InteractiveAxes[sender.selectedItem.Header];
}
function resetAxes() {
if (chartZoom) {
chartZoom.reset();
if (scalingChart) {
scalingChart.axisX.min = new Date(2014, 4, 1);
scalingChart.axisY.min = 24;
}
}
document.querySelector('#reset').disabled = 'disabled';
}
</script>
<c1-flex-chart id="scalingChart" binding-x="Date"chart-type="ChartType.Area" >
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-chart-series binding="SalesInUSA" name="Sales in USA">
</c1-flex-chart-series>
</c1-flex-chart>
|
|