作成日: 2019/10/10 最終更新日: 2019/10/10
文書種別
使用方法
詳細
系列（Series）のItemFormatterプロパティを使用してイベントを実装し、条件に応じてデータ単位でスタイルを変更することが出来ます。
この場合、ItemFormatterのパラメータには、チャート上に要素を描画するIRenderEngine／描画する要素を記述するHitTestInfo／項目のデフォルトの描画を提供する関数の3つを使用します。
下記のコードは、棒グラフにおいてデータ値の範囲に応じて棒の色を変更する例です。
◎サンプルコード(View)
この場合、ItemFormatterのパラメータには、チャート上に要素を描画するIRenderEngine／描画する要素を記述するHitTestInfo／項目のデフォルトの描画を提供する関数の3つを使用します。
下記のコードは、棒グラフにおいてデータ値の範囲に応じて棒の色を変更する例です。
◎サンプルコード(View)
<script>
function SeriesFormatter(engine, hitInfo, renderer) {
if (hitInfo.series.binding == "Downloads") {
if (hitInfo.item.Hired > new Date(2019, 5, 30)) {
engine.fill = "lightgreen";
} else {
engine.fill = "lightblue";
}
}
renderer();
}
</script>
@(Html.C1().FlexChart()
.BindingX("Hired")
.AxisX(cab => cab.Format("MMM"))
.AxisY(y => y.MajorGrid(false))
.Series(csbsb =>
{
csbsb.Add().ChartType(C1.Web.Mvc.Chart.ChartType.Column).Binding("Downloads").ItemFormatter("SeriesFormatter");
・・・
})
・・・
)
function SeriesFormatter(engine, hitInfo, renderer) {
if (hitInfo.series.binding == "Downloads") {
if (hitInfo.item.Hired > new Date(2019, 5, 30)) {
engine.fill = "lightgreen";
} else {
engine.fill = "lightblue";
}
}
renderer();
}
</script>
@(Html.C1().FlexChart()
.BindingX("Hired")
.AxisX(cab => cab.Format("MMM"))
.AxisY(y => y.MajorGrid(false))
.Series(csbsb =>
{
csbsb.Add().ChartType(C1.Web.Mvc.Chart.ChartType.Column).Binding("Downloads").ItemFormatter("SeriesFormatter");
・・・
})
・・・
)
旧文書番号
84547