能否用Highcharts制作仅含对应数值的无图表图形？尝试threshold等未奏效

Absolutely! You can absolutely build a Highcharts setup that shows nothing but your target numeric values, with zero default chart elements like axes, grids, markers, or legends. The threshold and softThreshold parameters are designed for handling data cutoffs in series (like hiding values below a certain point), so they aren't the right tools for this task—let's break down the solution step by step.

Key Steps to Achieve This #

• Hide all default chart UI elements: Axes, borders, titles, legends, credits, and grid lines all need to be disabled or hidden.
• Use dataLabels as the primary display: Enable and style dataLabels to show your numeric values exactly how you want them.
• Position values strategically: Use a dummy series (like scatter or line) to place your values in the right spots on the chart canvas.

Example Code Implementation #

Here's a working example that centers a single numeric value with no extra chart clutter:

Highcharts.chart('container', {
    // Configure chart container to be clean
    chart: {
        type: 'scatter',
        backgroundColor: 'transparent',
        borderWidth: 0,
        margin: [0, 0, 0, 0],
        padding: [0, 0, 0, 0]
    },
    // Hide both axes completely
    xAxis: {
        visible: false,
        min: 0,
        max: 1
    },
    yAxis: {
        visible: false,
        min: 0,
        max: 1
    },
    // Style scatter series to hide markers, only show dataLabels
    plotOptions: {
        scatter: {
            marker: { enabled: false },
            dataLabels: {
                enabled: true,
                format: '{y}', // Displays the numeric value
                style: {
                    fontSize: '28px',
                    fontWeight: 'bold',
                    color: '#2c3e50'
                },
                align: 'center',
                verticalAlign: 'middle'
            }
        }
    },
    // Dummy data to position the value (0.5,0.5 centers it)
    series: [{
        data: [[0.5, 42]]
    }],
    // Hide all extra UI components
    title: { text: null },
    legend: { enabled: false },
    credits: { enabled: false }
});

Customizing for Multiple Values #

If you need to display multiple values (e.g., arranged in a row or column), just add more data points and adjust their x/y coordinates:

series: [{
    data: [
        [0.2, 15],  // Left-aligned value
        [0.5, 30],  // Centered value
        [0.8, 45]   // Right-aligned value
    ]
}]

Additional Tweaks #

• Want a background box around your values? Use the chart.renderer.rect() method to draw a custom shape behind the dataLabels.
• Need different styles for individual values? Use dataLabels.formatter instead of format to apply conditional styling per data point.
• Prefer a line series instead of scatter? Just set chart.type: 'line' and add lineWidth: 0 to the plotOptions to hide the line.

This approach gives you full control over how your numeric values are displayed, without any of the standard chart distractions.

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