作成日: 2019/10/10 最終更新日: 2019/10/10
文書種別
使用方法
詳細
軸ラベルの値にはグラフのデータが表示されますが、AxisクラスのitemFormatterプロパティを使用することで、データに紐づいた別の値で表示することも可能です。
この場合、「グラフのデータ」と「軸ラベルに表示する値」をマッピングするための配列を作成する必要があります。
また、itemFormatterでは、次の２つのパラメータを使用します。
1.engine：ラベルのレンダリングに使用される IRenderEngine オブジェクト
2.label：ラベルを表し、次のプロパティを持つオブジェクト
・value：ラベルが表す値
・text：ラベルのテキストコンテンツ（通常は、書式設定された値）
・pos：コントロール座標内のレベルがレンダリングされる位置
・cls：ラベル要素に適用される CSS クラス
◎サンプルコード(View)
この場合、「グラフのデータ」と「軸ラベルに表示する値」をマッピングするための配列を作成する必要があります。
また、itemFormatterでは、次の２つのパラメータを使用します。
1.engine：ラベルのレンダリングに使用される IRenderEngine オブジェクト
2.label：ラベルを表し、次のプロパティを持つオブジェクト
・value：ラベルが表す値
・text：ラベルのテキストコンテンツ（通常は、書式設定された値）
・pos：コントロール座標内のレベルがレンダリングされる位置
・cls：ラベル要素に適用される CSS クラス
◎サンプルコード(View)
@(Html.C1().FlexChart().Id("windChart").Bind("WindTime", Model).ChartType(ChartType.Scatter).Series(sers =>
{
sers.Add().Binding("WindDirectionID").Name("Wind Direction");
}).PlotMargin("auto auto auto 150"))
<script>
let directions = ["North", "East", "West", "South", "NorthEast", "NorthWest", "SouthEast", "SouthWest", "EastSouthEast", "SouthSouthEast", "SouthSouthWest", "WestSouthWest", "WestNorthWest", "NorthNorthWest", "NorthNorthEast", "EastNorthEast" ];
let chart = wijmo.Control.getControl('#windChart');
chart.tooltip.content = '<b>{seriesName}</b><br>{x} {WindDirection}';
chart.axisX.format = "HH:mm";
chart.axisY.itemFormatter = function (engine, lbl) {
lbl.text = directions[lbl.val];
return lbl;
}
</script>
{
sers.Add().Binding("WindDirectionID").Name("Wind Direction");
}).PlotMargin("auto auto auto 150"))
<script>
let directions = ["North", "East", "West", "South", "NorthEast", "NorthWest", "SouthEast", "SouthWest", "EastSouthEast", "SouthSouthEast", "SouthSouthWest", "WestSouthWest", "WestNorthWest", "NorthNorthWest", "NorthNorthEast", "EastNorthEast" ];
let chart = wijmo.Control.getControl('#windChart');
chart.tooltip.content = '<b>{seriesName}</b><br>{x} {WindDirection}';
chart.axisX.format = "HH:mm";
chart.axisY.itemFormatter = function (engine, lbl) {
lbl.text = directions[lbl.val];
return lbl;
}
</script>
旧文書番号
84548