タグ→棒グラフの置換
LIVE DEMO
SOURCE CODE
タグからグラフへの置き換え
TwinMaker のタグを 線グラフや棒グラフに置き換えます
前提
TwinMaker のシーンに、任意の名前を付けたタグがあること
今回はtag-name-graphの名前を付けます
リソース
public 以下に、以下のファイルがあること
- single-content.json
TwinMaker の定義ファイル
ソースコード
import { SceneViewer } from "@iot-app-kit/scene-composer";
import {
ButtonStyle,
useOverrideTags,
DirectSceneLoader,
} from "@iak-extra/scene-composer-extra";
function App() {
// TwinMakerの定義ファイルをpublicに配置する
const sceneLoader = new DirectSceneLoader("/single-content.json");
/** TwinMakerをカスタマイズするコントローラー */
const controller = useOverrideTags({
// tag-name-graphのタグを、ボタンに置き換える
"tag-name-graph": (replaceTag) =>
replaceTag.toBarChart?.create({ // 棒グラフに置き換える
// 棒グラフに表示するデータを指定する
data: [2300, 3100, 2200, 1100],
}),
});
return (
<div className="App">
<SceneViewer
sceneComposerId={controller.composerId}
sceneLoader={sceneLoader}
activeCamera="Camera1"
/>
</div>
);
}
toBarChartで棒グラフ、toLineChartで線グラフに置き換えます
レイアウトやグラフの形式を詳細にカスタマイズすることもできます。その場合は、toHTMLにrechartsのグラフを渡すようにしてください。