如何在GWT 2.8.1应用中集成Chart.js并嵌入VerticalPanel？

我来一步步帮你把给定的Chart.js代码整合到GWT应用里，并且把图表嵌入到VerticalPanel中，按以下步骤操作即可：

1. 先搞定Chart.js的引入和依赖脚本 #

首先，确保你已经把chart.js文件放到项目的war目录下（和project.gwt.xml同级的话，编译后会自动复制到war目录，所以路径没问题）。然后打开你的GWT宿主HTML页面（比如YourApp.html），添加以下代码引入Chart.js和必要的辅助脚本：

<!-- 引入Chart.js库 -->
<script src="chart.js"></script>
<!-- 原JS代码依赖的颜色常量和随机数生成函数 -->
<script>
window.chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};

function randomScalingFactor() {
	return Math.round(Math.random() * 100);
}
</script>

这部分是原JS代码的依赖，必须加上，不然会出现未定义的错误。

2. 创建包含图表和按钮的GWT组件 #

接下来，我们创建一个继承自VerticalPanel的自定义组件，把Canvas、操作按钮都放进去，方便后续复用：

import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import elemental2.dom.HTMLCanvasElement;
import elemental2.dom.DomGlobal;

public class ChartLinePanel extends VerticalPanel {

    // 保存Canvas元素和Chart实例引用
    private HTMLCanvasElement canvas;
    private Object chartInstance;

    public ChartLinePanel() {
        // 初始化UI元素
        initWidgetElements();
        // 初始化Chart.js图表
        initChartWithJSNI();
    }

    private void initWidgetElements() {
        // 创建Canvas元素，设置ID对应原JS里的选择器
        canvas = (HTMLCanvasElement) DomGlobal.document.createElement("canvas");
        canvas.id = "canvas";
        // 可以先设置初始宽高，Chart.js的responsive选项会自动适配
        canvas.width = 800;
        canvas.height = 400;
        // 把Canvas转成GWT Widget添加到VerticalPanel
        add(Widget.as(canvas));

        // 创建所有操作按钮，设置对应ID
        Button randomizeBtn = new Button("Randomize Data");
        randomizeBtn.getElement().setId("randomizeData");
        add(randomizeBtn);

        Button addDatasetBtn = new Button("Add Dataset");
        addDatasetBtn.getElement().setId("addDataset");
        add(addDatasetBtn);

        Button addDataBtn = new Button("Add Data");
        addDataBtn.getElement().setId("addData");
        add(addDataBtn);

        Button removeDatasetBtn = new Button("Remove Dataset");
        removeDatasetBtn.getElement().setId("removeDataset");
        add(removeDatasetBtn);

        Button removeDataBtn = new Button("Remove Data");
        removeDataBtn.getElement().setId("removeData");
        add(removeDataBtn);
    }

3. 用JSNI实现Chart初始化和事件绑定 #

GWT和原生JS交互最直接的方式是用JSNI，我们把原JS的逻辑移植到JSNI方法里，注意要使用$wnd访问全局window对象，并且绑定this指向GWT组件实例：

private native void initChartWithJSNI() /*-{
        // 原JS里的月份数组
        var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        
        // 图表配置，和原JS一致
        var config = {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: $wnd.chartColors.red,
                    borderColor: $wnd.chartColors.red,
                    data: [
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor()
                    ],
                    fill: false,
                }, {
                    label: 'My Second dataset',
                    fill: false,
                    backgroundColor: $wnd.chartColors.blue,
                    borderColor: $wnd.chartColors.blue,
                    data: [
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor(),
                        $wnd.randomScalingFactor()
                    ],
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Chart.js Line Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }]
                }
            }
        };

        // 获取Canvas上下文并初始化Chart
        var ctx = $wnd.document.getElementById('canvas').getContext('2d');
        this.@com.example.ChartLinePanel::chartInstance = new $wnd.Chart(ctx, config);

        // 绑定Randomize Data按钮事件
        $wnd.document.getElementById('randomizeData').addEventListener('click', function() {
            config.data.datasets.forEach(function(dataset) {
                dataset.data = dataset.data.map(function() {
                    return $wnd.randomScalingFactor();
                });
            });
            this.@com.example.ChartLinePanel::chartInstance.update();
        }.bind(this));

        // 绑定Add Dataset按钮事件
        var colorNames = Object.keys($wnd.chartColors);
        $wnd.document.getElementById('addDataset').addEventListener('click', function() {
            var colorName = colorNames[config.data.datasets.length % colorNames.length];
            var newColor = $wnd.chartColors[colorName];
            var newDataset = {
                label: 'Dataset ' + config.data.datasets.length,
                backgroundColor: newColor,
                borderColor: newColor,
                data: [],
                fill: false
            };

            for (var index = 0; index < config.data.labels.length; ++index) {
                newDataset.data.push($wnd.randomScalingFactor());
            }

            config.data.datasets.push(newDataset);
            this.@com.example.ChartLinePanel::chartInstance.update();
        }.bind(this));

        // 绑定Add Data按钮事件
        $wnd.document.getElementById('addData').addEventListener('click', function() {
            if (config.data.datasets.length > 0) {
                var month = MONTHS[config.data.labels.length % MONTHS.length];
                config.data.labels.push(month);

                config.data.datasets.forEach(function(dataset) {
                    dataset.data.push($wnd.randomScalingFactor());
                });

                this.@com.example.ChartLinePanel::chartInstance.update();
            }
        }.bind(this));

        // 绑定Remove Dataset按钮事件
        $wnd.document.getElementById('removeDataset').addEventListener('click', function() {
            config.data.datasets.splice(0, 1);
            this.@com.example.ChartLinePanel::chartInstance.update();
        }.bind(this));

        // 绑定Remove Data按钮事件
        $wnd.document.getElementById('removeData').addEventListener('click', function() {
            config.data.labels.splice(-1, 1);

            config.data.datasets.forEach(function(dataset) {
                dataset.data.pop();
            });

            this.@com.example.ChartLinePanel::chartInstance.update();
        }.bind(this));
    }-*/;

    // 可选：添加销毁方法，避免页面卸载时内存泄漏
    public native void destroyChart() /*-{
        if (this.@com.example.ChartLinePanel::chartInstance) {
            this.@com.example.ChartLinePanel::chartInstance.destroy();
            this.@com.example.ChartLinePanel::chartInstance = null;
        }
    }-*/;
}

4. 在EntryPoint中使用这个组件 #

最后，在你的GWT入口类里，把这个ChartLinePanel添加到VerticalPanel或者RootPanel中：

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class MyAppEntryPoint implements EntryPoint {

    @Override
    public void onModuleLoad() {
        // 创建主VerticalPanel
        VerticalPanel mainPanel = new VerticalPanel();
        // 创建图表组件并添加进去
        ChartLinePanel chartPanel = new ChartLinePanel();
        mainPanel.add(chartPanel);
        // 把主面板添加到页面
        RootPanel.get().add(mainPanel);
    }
}

几个关键注意点 #

• JSNI中的全局对象访问：GWT里不能直接用window，必须用$wnd来访问浏览器的全局对象，所以原JS里的window.chartColors要改成$wnd.chartColors，new Chart()要改成new $wnd.Chart()。
• 事件绑定的this指向：JSNI里的事件处理函数需要用.bind(this)绑定到GWT组件实例，否则this会指向window对象，找不到chartInstance。
• 路径正确性：确保chart.js的路径在宿主HTML里是正确的，如果你的项目有模块重命名，可能需要调整路径为yourmodule/chart.js。
• 内存泄漏防范：如果你的组件会被动态销毁，记得调用destroyChart()方法销毁Chart实例。

内容的提问来源于stack exchange，提问作者Tex'N'Duet