JS新手求助：如何用Highcharts加载CSV构建带颜色的树形图？

Hey there! Let's get that treemap working properly. The issue with your current code is how you're configuring the CSV parsing and color mapping—Highcharts needs a bit more explicit setup to connect your colorValue column to the chart's color axis. Here's a fixed version of your code, plus breakdowns of the key changes:

Updated HTML (no major changes needed) #

Your existing HTML is fine, but I'll include it for completeness:

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<pre id="data" style="display:none">Name,Value,colorValue
A,1,1
B,10,25
C,20,0
D,30,16
E,40,78
F,50,85
G,60,20
H,70,35
I,80,9
</pre>
<div id="container"></div>
<script src="Highcharts/code/highcharts.js"></script>
<script src="Highcharts/code/modules/heatmap.js"></script>
<script src="Highcharts/code/modules/treemap.js"></script>
<script src="Highcharts/code/modules/data.js"></script>
<script src="index.js"></script>
</body>
</html>

Corrected JavaScript #

Highcharts.chart('container', {
    colorAxis: {
        minColor: '#ff4444', // Red for lowest colorValue
        maxColor: '#44dd44', // Green for highest colorValue
        min: 0,
        max: 100 // Matches your colorValue range (0-100)
    },
    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        data: {
            csv: document.getElementById('data').innerHTML,
            // Explicitly map CSV columns to point properties
            seriesMapping: [{
                name: 0,    // Column 0 = Name
                value: 1,   // Column 1 = Value (treemap size)
                colorValue: 2 // Column 2 = colorValue (color axis input)
            }],
            // Convert CSV string values to numbers (critical for proper color mapping)
            parsed: function (columns) {
                for (let i = 1; i < columns.length; i++) {
                    columns[i] = columns[i].map(Number);
                }
                return columns;
            }
        },
        // Tell Highcharts to use the colorValue property for color axis mapping
        colorKey: 'colorValue'
    }],
    title: {
        text: 'Highcharts Treemap with Custom CSV Colors'
    }
});

Key Fixes Explained: #

• colorKey: 'colorValue': This tells the treemap series to use each data point's colorValue property to determine its color from the color axis. Without this, Highcharts doesn't know how to connect your third column to the color scale.
• Explicit seriesMapping: Clearly defining which column maps to which point property removes ambiguity—this ensures Highcharts parses your CSV exactly as you intend.
• parsed Callback: CSV data is parsed as strings by default. Converting the numeric columns (Value and colorValue) to actual numbers ensures Highcharts can correctly calculate treemap sizes and color gradients.
• Adjusted Color Axis: I set minColor to red and maxColor to green (matching your "red to green" requirement) and defined min/max to align with your colorValue range (0-100).

When you run this code, you should see a working treemap where each block's size is determined by the Value column, and its color fades from red (low colorValue) to green (high colorValue).

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