<div class="flex-container">
@(Html.DevExtreme().PieChart()
.ID("pie")
.ElementAttr("class", "flex-block")
.Palette(VizPalette.Material)
.PaletteExtensionMode(VizPaletteExtensionMode.Blend)
.Series(s => s.Add())
.Legend(l => l.Visible(false))
.DataSource(Enumerable.Repeat(1, 20).Select((val, index) => new {
val = val,
arg = String.Format("Item{0}", index)
}))
.OnDrawn(@<text>
function(e) {
var paletteName = e.component.option("palette"),
palette = DevExpress.viz.getPalette(paletteName).simpleSet,
paletteContainer = $(".palette-container");
paletteContainer.html("");
palette.forEach(function(color) {
$("<div>").css({
backgroundColor: color
})
.addClass("palette-item")
.appendTo(paletteContainer);
});
}
</text>)
)
<div class="palette-container flex-block"></div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Palette</span>
@(Html.DevExtreme().SelectBox()
.Value("Material")
.Items(new[] { "Material", "Soft Pastel", "Harmony Light", "Pastel", "Bright", "Soft", "Ocean", "Office", "Vintage", "Violet", "Carmine", "Dark Moon", "Soft Blue", "Dark Violet", "Green Mist" })
.OnValueChanged(@<text>
function(e) {
$("#pie").dxPieChart({
palette: e.value
});
}
</text>)
)
</div>
<div class="option">
<span>Palette Extension Mode</span>
@(Html.DevExtreme()
.SelectBox()
.Value("Blend")
.Items(Enum.GetNames(typeof(VizPaletteExtensionMode)))
.OnValueChanged(@<text>
function(e) {
$("#pie").dxPieChart({
paletteExtensionMode: e.value.toLowerCase()
});
}
</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 Palette() {
return View();
}
}
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
#pie {
height: 350px;
width: 500px;
margin: 20px;
}
.palette-container {
float: left;
}
.palette-item {
width: 40px;
height: 40px;
}
.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;
min-width: 320px;
margin-top: 5px;
}
.option > span {
margin: 0 10px 0 0;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}