@(Html.DevExtreme().Chart()
.ID("chart")
.Title("Relative Masses of the Heaviest\n Solar System Objects")
.Legend(l => l.Visible(false))
.Series(s => s
.Add()
.Type(SeriesType.Bar)
.ValueField("Mass")
.ArgumentField("Name")
)
.ValueAxis(v => v
.Add()
.Visible(true)
.AutoBreaksEnabled(true)
.MaxAutoBreakCount(3)
.BreakStyle(b => b.Line(ScaleBreakLineStyle.Waved))
)
.DataSource(new[] {
new { Name = "Jupiter", Mass = 318.0 },
new { Name = "Saturn", Mass = 95.0 },
new { Name = "Uranus", Mass = 14.6 },
new { Name = "Neptune", Mass = 17.2 },
new { Name = "Earth", Mass = 1.0 },
new { Name = "Venus", Mass = 0.82 },
new { Name = "Mars", Mass = 0.11 },
new { Name = "Mercury", Mass = 0.06 }
})
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Enable Breaks")
.Value(true)
.ElementAttr("class", "checkbox")
.OnValueChanged(@<text>
function(data) {
var chart = $("#chart").dxChart("instance");
chart.option("valueAxis[0].autoBreaksEnabled", data.value);
}
</text>)
)
</div>
<div class="option">
<span>Max Count</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { 1, 2, 3, 4 })
.Value(3)
.Width(60)
.OnValueChanged(@<text>
function(data) {
var chart = $("#chart").dxChart("instance");
chart.option("valueAxis[0].maxAutoBreakCount", data.value);
}
</text>)
)
</div>
<div class="option">
<span>Style</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { ScaleBreakLineStyle.Waved, ScaleBreakLineStyle.Straight })
.Value(ScaleBreakLineStyle.Waved)
.Width(120)
.OnValueChanged(@<text>
function(data) {
var chart = $("#chart").dxChart("instance");
chart.option("valueAxis[0].breakStyle.line", data.value);
}
</text>)
)
</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 ScaleBreaks() {
return View();
}
}
}
#chart {
height: 440px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
display: inline-block;
margin-right: 70px;
margin-top: 5px;
}
.option > span {
margin: 0 10px 0 0;
}
.checkbox{
margin-top: -4px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}