ExtJS折线图：多公司动态数据的系列动态配置问题

Great question! When dealing with dynamic series in ExtJS charts where the number of entities (like your companies) isn't fixed, the key is to generate your series configurations on the fly instead of hardcoding them. This way you avoid repeating Y-axis setup and adapt automatically to whatever data comes in.

Step 1: Base View & Chart Setup #

First, let's refine your ABC.view.Job container to include a Cartesian chart with core static configurations (like the date X-axis and a shared numeric Y-axis). We'll leave the series empty initially, since we'll generate them dynamically:

Ext.define('ABC.view.Job', {
    extend: 'Ext.container.Container',
    xtype: 'job-chart-container',
    layout: 'fit',

    initComponent: function() {
        this.items = [{
            xtype: 'cartesian',
            reference: 'companyPerformanceChart',
            store: 'CompanyPerformanceStore', // Replace with your actual store
            axes: [
                // Date X-axis (fixed configuration)
                {
                    type: 'time',
                    position: 'bottom',
                    fields: 'date',
                    title: 'Date',
                    dateFormat: 'Y-m-d',
                    grid: true
                },
                // Shared Numeric Y-axis (reused for all series)
                {
                    type: 'numeric',
                    position: 'left',
                    title: 'Metric Value',
                    grid: true,
                    minimum: 0,
                    // Add any other shared Y-axis config here once
                }
            ],
            legend: {
                docked: 'bottom',
                itemTpl: '<span style="color:{mark};">{name}</span>'
            },
            // No hardcoded series here!
        }];

        this.callParent(arguments);

        // Listen for store load to generate series
        this.getChart().getStore().on({
            load: this.generateDynamicSeries,
            datachanged: this.generateDynamicSeries, // Update if data changes later
            scope: this
        });
    },

    // Helper to get the chart component
    getChart: function() {
        return this.lookup('companyPerformanceChart');
    },

    // Core function to generate dynamic series
    generateDynamicSeries: function(store) {
        const chart = this.getChart();
        const records = store.getRange();
        if (!records.length) return;

        // 1. Extract all unique company names from the data
        const uniqueCompanies = Ext.Array.unique(
            records.map(record => record.get('company'))
        );

        // 2. Prepare color pool (use ExtJS's built-in theme colors or custom)
        const colorPalette = Ext.chart.theme.Default.colors;
        const seriesConfigs = [];

        // 3. Generate a series for each company
        uniqueCompanies.forEach((company, index) => {
            const seriesColor = colorPalette[index % colorPalette.length]; // Cycle colors if needed

            seriesConfigs.push({
                type: 'line',
                title: company,
                xField: 'date',
                yField: 'value', // Replace with your numeric field name
                // Filter to only show data for this company
                filter: record => record.get('company') === company,
                // Style the line and markers
                style: {
                    strokeStyle: seriesColor,
                    lineWidth: 2
                },
                marker: {
                    fillStyle: seriesColor,
                    radius: 4
                },
                // Optional: Add tooltip config once for all series
                tooltip: {
                    trackMouse: true,
                    renderer: function(tooltip, record, item) {
                        tooltip.setHtml(`${company}<br/>Date: ${Ext.Date.format(record.get('date'), 'Y-m-d')}<br/>Value: ${record.get('value')}`);
                    }
                }
            });
        });

        // 4. Update the chart with the dynamic series
        chart.setSeries(seriesConfigs);
    }
});

Key Details Explained #

• Shared Y-axis: We define the Y-axis once in the chart's axes config, and all dynamic series automatically use it. No need to repeat Y-axis settings for each company.
• Unique Company Extraction: We use Ext.Array.unique to pull distinct company names from your store's records—works no matter how many companies are present.
• Color Management: We cycle through ExtJS's built-in theme colors (or you can replace this with a custom color array) to ensure each series has a distinct color.
• Data Filtering: Each series uses a filter function to only display data points belonging to its company. This assumes your data is structured as long format (each record = date + company + value). If your data is in wide format (date + companyA_value + companyB_value + ...), adjust the code to extract field names instead of company names (see below).

Wide Format Data Adjustment #

If your store uses a wide data structure (e.g., fields: date, CompanyX, CompanyY, etc.), modify the generateDynamicSeries function like this:

generateDynamicSeries: function(store) {
    const chart = this.getChart();
    const modelFields = store.getModel().getFields();
    // Extract all fields except the date field
    const companyFields = modelFields.filter(field => field.name !== 'date').map(field => field.name);

    const colorPalette = Ext.chart.theme.Default.colors;
    const seriesConfigs = [];

    companyFields.forEach((companyField, index) => {
        const seriesColor = colorPalette[index % colorPalette.length];
        seriesConfigs.push({
            type: 'line',
            title: companyField, // Use field name as series title
            xField: 'date',
            yField: companyField, // Directly use the company's field
            style: { strokeStyle: seriesColor, lineWidth: 2 },
            marker: { fillStyle: seriesColor, radius: 4 }
        });
    });

    chart.setSeries(seriesConfigs);
}

Additional Tips #

• Performance: If you expect hundreds of companies, consider adding a series filter UI (like a multi-select dropdown) to let users toggle which companies are displayed—this prevents the chart from becoming cluttered.
• Dynamic Updates: The datachanged listener ensures the series refresh if your store's data is updated (e.g., new companies added).
• Custom Colors: If you need more colors than the default theme provides, create a custom color array (e.g., ['#FF5733', '#33FF57', '#3357FF', ...]) and use that instead of Ext.chart.theme.Default.colors.

内容的提问来源于stack exchange，提问作者Shiromi