This app demonstrates using a popular charting library, Chart.js, for rendering charts within nodes.

The data for each chart is stored on the node data in the model. In this case the datasets property value has the same properties that are expected by the Chart.js configuration, but you could organize the data however you want.

The makeLineChart conversion function is used by a Binding on Picture.element to generate a Canvas element that can be shown in the node. Most of the implementation of that function is specific to Chart.js. The rendering requires the Canvas to be in the HTML DOM. To avoid accumulating resources, the configuration of the chart defines an onComplete event handler to remove the Canvas element from the DOM. That allows any future removal of the Node from the Diagram not to leave an unused Canvas element behind.

加入 GoJS 交流群
GoJS 交流群 (769862113)