@(Html.DevExtreme().Chart()
.ID("chart")
.CommonSeriesSettings(s => s.Type(SeriesType.Scatter))
.Series(s => {
s.Add().ArgumentField("x1").ValueField("y1");
s.Add().ArgumentField("x2").ValueField("y2").Point(p => p
.Symbol(PointSymbol.TriangleDown)
);
})
.ArgumentAxis(a => a
.CustomPosition(0)
.Offset(0)
.VisualRange(new double[] { -20, 20 })
)
.ValueAxis(a => a.Add()
.CustomPosition(0)
.Offset(0)
.EndOnTick(false)
.VisualRange(new double[] { -20, 20 })
)
.Legend(l => l
.Visible(false)
)
.DataSource(Model)
)
<div class="options">
<div class="caption">Options</div>
<div class="common">
<div class="block left">
<span>Argument Axis</span>
<div class="option">
<span>Custom position:</span>
@(Html.DevExtreme().NumberBox()
.Value(0)
.ShowSpinButtons(true)
.OnValueChanged(@<text>
function(e) {
var chart = $("#chart").dxChart("instance");
chart.option("argumentAxis.customPosition", e.value);
}
</text>)
)
</div>
<div class="option">
<span>Offset:</span>
@(Html.DevExtreme().NumberBox()
.Value(0)
.ShowSpinButtons(true)
.OnValueChanged(@<text>
function(e) {
var chart = $("#chart").dxChart("instance");
chart.option("argumentAxis.offset", e.value);
}
</text>)
)
</div>
</div>
<div class="block right">
<span>Value Axis</span>
<div class="option">
<span>Custom position:</span>
@(Html.DevExtreme().NumberBox()
.Value(0)
.ShowSpinButtons(true)
.OnValueChanged(@<text>
function(e) {
var chart = $("#chart").dxChart("instance");
chart.option("valueAxis[0].customPosition", e.value);
}
</text>)
)
</div>
<div class="option">
<span>Offset:</span>
@(Html.DevExtreme().NumberBox()
.Value(0)
.ShowSpinButtons(true)
.OnValueChanged(@<text>
function(e) {
var chart = $("#chart").dxChart("instance");
chart.option("valueAxis[0].offset", e.value);
}
</text>)
)
</div>
</div>
</div>
</div>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult AxisCustomPosition() {
return View(SampleData.GetDataForCustomPosition());
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static IEnumerable<object> GetDataForCustomPosition() {
var rnd = new Random();
Nullable<int> x1 = null;
Nullable<int> x2 = null;
Nullable<int> y1 = null;
Nullable<int> y2 = null;
int i;
List<object> ds = new List<object>();
for(i = 0; i < 20; i++) {
x1 = rnd.Next(5, 15);
y1 = rnd.Next(5, 15);
ds.Add(new { x1 = x1, y1 = y1, x2 = x2, y2 = y2 });
}
for(i = 0; i < 20; i++) {
x2 = rnd.Next(5, 15);
y2 = rnd.Next(-15, -5);
ds.Add(new { x1 = x1, y1 = y1, x2 = x2, y2 = y2 });
}
for(i = 0; i < 20; i++) {
x2 = rnd.Next(-15, -5);
y2 = rnd.Next(5, 15);
ds.Add(new { x1 = x1, y1 = y1, x2 = x2, y2 = y2 });
}
for(i = 0; i < 20; i++) {
x1 = rnd.Next(-15, -5);
y1 = rnd.Next(-15, -5);
ds.Add(new { x1 = x1, y1 = y1, x2 = x2, y2 = y2 });
}
return ds.ToArray();
}
}
}
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.option {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.option > span {
margin-right: 20px;
}
.caption {
font-size: 18px;
font-weight: 700;
}
.option > .dx-numberbox {
width: 90px;
margin-left: auto;
}
.common {
width: 488px;
}
.block {
vertical-align: middle;
margin-top: 10px;
}
.left {
display: inline-block;
}
.right {
float: right;
}
.block > span {
font-size: 18px;
font-weight: 500;
}