如何以最简方式在Ext JS应用中集成Google Visualization组件？

Hey there! Let me break down the simplest way to integrate Google Visualization components (Pie Chart, Sankey, Maps, Line Chart, Histograms, etc.) into your Ext JS app. I’ve used this approach in several projects and it’s straightforward without extra complexity.

First, you need to include the Google Charts loader script in your app's entry point (usually index.html):

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Then, load the required chart packages and initialize your Ext JS app after the Google API is ready:

// Load the Google Visualization packages you need
google.charts.load('current', {
  packages: ['corechart', 'sankey', 'maps', 'histogram'] // Add/remove packages based on your needs
});

// Initialize Ext JS app once Google API is loaded
google.charts.setOnLoadCallback(function() {
  Ext.application({
    name: 'GoogleVisDemo',
    launch: function() {
      // Your app's launch logic goes here
    }
  });
});

To avoid repeating code for each chart, create a base Ext JS panel component that wraps Google Visualization charts. This component handles rendering and data passing:

Ext.define('GoogleVis.Chart', {
  extend: 'Ext.panel.Panel',
  alias: 'widget.googlevischart',

  config: {
    googleChartType: '', // e.g., 'PieChart', 'Sankey'
    chartData: null, // Google-compatible 2D array data
    chartOptions: {} // Chart configuration options
  },

  afterRender: function() {
    this.callParent(arguments);
    // Ensure Google API is loaded before rendering
    if (google?.visualization) {
      this.renderChart();
    } else {
      google.charts.setOnLoadCallback(Ext.bind(this.renderChart, this));
    }
  },

  renderChart: function() {
    const chartElement = this.getEl().dom;
    // Initialize the Google chart
    const chart = new google.visualization[this.getGoogleChartType()](chartElement);
    // Convert data to Google's DataTable format
    const dataTable = google.visualization.arrayToDataTable(this.getChartData());
    // Render the chart
    chart.draw(dataTable, this.getChartOptions());
  }
});

Now you can quickly create any Google Visualization component using the reusable base component:

1. Pie Chart #

Ext.create('GoogleVis.Chart', {
  renderTo: Ext.getBody(),
  width: 400,
  height: 300,
  googleChartType: 'PieChart',
  chartData: [
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ],
  chartOptions: {
    title: 'My Daily Activities'
  }
});

2. Sankey Chart #

(Make sure you included the sankey package in the initial API load)

Ext.create('GoogleVis.Chart', {
  renderTo: Ext.getBody(),
  width: 600,
  height: 300,
  googleChartType: 'Sankey',
  chartData: [
    ['From', 'To', 'Weight'],
    ['A', 'X', 5],
    ['A', 'Y', 7],
    ['B', 'X', 3],
    ['B', 'Y', 2],
    ['C', 'X', 4],
    ['C', 'Y', 1]
  ],
  chartOptions: {
    sankey: {
      node: {
        colors: ['#a61d4c', '#f47e60', '#f7b267', '#6ab187', '#3d5a80']
      }
    }
  }
});

3. Google Maps #

(Make sure you included the maps package in the initial API load)

Ext.create('GoogleVis.Chart', {
  renderTo: Ext.getBody(),
  width: 600,
  height: 400,
  googleChartType: 'Map',
  chartData: [
    ['Country', 'Population'],
    ['China', 1380000000],
    ['India', 1310000000],
    ['United States', 324000000],
    ['Indonesia', 264000000]
  ],
  chartOptions: {
    showTooltip: true,
    showInfoWindow: true
  }
});

4. Line Chart #

(Uses the corechart package included by default)

Ext.create('GoogleVis.Chart', {
  renderTo: Ext.getBody(),
  width: 600,
  height: 300,
  googleChartType: 'LineChart',
  chartData: [
    ['Year', 'Sales', 'Expenses'],
    ['2014', 1000, 400],
    ['2015', 1170, 460],
    ['2016', 660, 1120],
    ['2017', 1030, 540]
  ],
  chartOptions: {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' }
  }
});

5. Histogram #

(Make sure you included the histogram package in the initial API load)

Ext.create('GoogleVis.Chart', {
  renderTo: Ext.getBody(),
  width: 600,
  height: 300,
  googleChartType: 'Histogram',
  chartData: [
    ['Age'],
    [8], [10], [12], [14], [16], [18], [20],
    [8], [10], [12], [14], [16], [18], [20],
    [8], [10], [12], [14], [16], [18], [20]
  ],
  chartOptions: {
    title: 'Age Distribution',
    legend: { position: 'none' }
  }
});

• Always ensure the Google Visualization API is fully loaded before rendering charts (the base component handles this, but double-check if you're customizing further).
• Follow Google's data format requirements (most charts use a 2D array with headers as the first row).
• Only load the chart packages you need to reduce initial load time.

内容的提问来源于stack exchange，提问作者Krishna Kumar Varshney