如何调整Highcharts数据表格列布局？实现城市行排、月份列排

Got it, let's fix this table layout reversal for you. To get cities (Tokyo, New York, Berlin, London) as rows and months as columns, we need to adjust both the data structure and the table rendering logic. Here's the modified implementation:

Step-by-Step Explanation & Code #

First, we'll restructure the data to be city-centric, then adjust how we render the table headers, data rows, and the divider lines with your tableLine function.

// Sample restructured data: cities as main entries, with monthly values
const cityData = [
  { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] },
  { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] },
  { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] },
  { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }
];
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Highcharts.tableLine = function (renderer, x1, y1, x2, y2) { 
    renderer.path(['M', x1, y1, 'L', x2, y2]).attr({ 
        'stroke': 'silver', 
        'stroke-width': 5 
    }).add(); 
};

// Initialize renderer (adjust container ID and dimensions as needed)
const renderer = new Highcharts.Renderer(
    document.getElementById('container'),
    800,
    400
);

// Render table headers (months as columns)
const headerY = 20;
const cellWidth = 60;
const cellHeight = 30;

// Empty cell for city label column
renderer.text('', 20, headerY + 15).add();
// Horizontal line below headers
Highcharts.tableLine(renderer, 20, headerY + cellHeight, 20 + (months.length + 1) * cellWidth, headerY + cellHeight);

// Render month headers
months.forEach((month, index) => {
    const x = 20 + (index + 1) * cellWidth;
    renderer.text(month, x, headerY + 15).add();
});

// Render data rows (cities as rows)
cityData.forEach((city, rowIndex) => {
    const rowY = headerY + (rowIndex + 1) * cellHeight;
    
    // Render city name as row header
    renderer.text(city.name, 20, rowY + 15).add();
    
    // Render monthly data for the city
    city.data.forEach((value, colIndex) => {
        const x = 20 + (colIndex + 1) * cellWidth;
        renderer.text(value.toFixed(1), x, rowY + 15).add();
    });
    
    // Horizontal divider line for each row
    Highcharts.tableLine(renderer, 20, rowY + cellHeight, 20 + (months.length + 1) * cellWidth, rowY + cellHeight);
});

// Add vertical divider lines
for (let col = 0; col <= months.length; col++) {
    const x = 20 + col * cellWidth;
    Highcharts.tableLine(renderer, x, headerY, x, headerY + (cityData.length + 1) * cellHeight);
}

Key Changes Made: #

• Data Restructuring: Switched from month-first to city-first data structure, so each city entry holds all its monthly values.
• Header Rendering: Now renders months as column headers instead of row headers.
• Row Rendering: Loops through each city to create a row, with the city name as the first cell, followed by its monthly data points.
• Line Adjustments: Updated the tableLine calls to match the new column/row dimensions, ensuring vertical and horizontal dividers align correctly with the reversed layout.

Just drop this into your project, adjust the container ID, cell dimensions, and styling as needed, and it should give you the reversed table layout you're looking for!

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