You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Highcharts折线图中仅显示圆形图例符号?

问题

我使用Highcharts创建了折线图,已将图例符号类型设置为圆形,但图例中却同时显示了线条与圆形的组合符号。我希望图例仅显示圆形或方形符号,而非带线条的组合符号,请问该如何配置?当前Highcharts配置代码如下:

Highcharts.chart({
    chart: {
        renderTo: 'chartcontainer',
        type: chart_type,
        backgroundColor: 'rgba(255,255,255,0)',
        width: this.chartWidth,
        height: this.chartHeight,
        options3d: {
            enabled: this.chart_settings.threed_chart_settings.enabled_threed,
            alpha: this.chart_settings.threed_chart_settings.alpha_value,
            axisLabelPosition: "auto",
            beta: this.chart_settings.threed_chart_settings.beta_value,
            depth: this.chart_settings.threed_chart_settings.depth_value,
            viewDistance: 25
        },
        spacingTop: this.chart_settings.title_setting.show_title ? !this.emptyChartData ? 10 : 25 : 25
    },
    noData: {
        style: {
            fontWeight: 'bold',
            fontSize: '15px'
        }
    },
    title: {
        text: this.chart_settings.title_setting.show_title ? !this.emptyChartData ? this.chart_settings.title_setting.title_name : ' ' : ' ',
        style: {
            fontSize: this.chart_settings.title_setting.font_size + 'px',
            color: this.chart_settings.title_setting.font_color,
            fontWeight: this.chart_settings.title_setting.font_style.bold,
            fontStyle: this.chart_settings.title_setting.font_style.italic,
            textDecoration: this.chart_settings.title_setting.font_style.underline,
            'font-family': this.chart_settings.title_setting.font_family + ', sans-serif'
        },
        align: this.chart_settings.title_setting.horizontal_align,
        verticalAlign: this.chart_settings.title_setting.vertical_align
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: this.chart_settings.legend_setting.show_legend,
        itemStyle: {
            fontSize: this.chart_settings.legend_setting.font_size + 'px',
            color: this.chart_settings.legend_setting.font_color,
            fontWeight: this.chart_settings.legend_setting.font_style.bold,
            fontStyle: this.chart_settings.legend_setting.font_style.italic,
            textDecoration: this.chart_settings.legend_setting.font_style.underline,
            'font-family': this.chart_settings.legend_setting.font_family + ', sans-serif'
        },
        align: this.chart_settings.legend_setting.horizontal_align,
        verticalAlign: this.chart_settings.legend_setting.vertical_align,
        alignColumns: false,
        navigation: {
            enabled: false
        },
        symbolRadius: this.chart_settings.legend_setting.symbol_type == "square" ? 0 : 100,
        symbolHeight: 12,
        symbolWidth: 12
    },
    xAxis: {
        visible: this.chart_settings.X_AXIS_setting.show_label,
        gridLineColor: this.chart_settings.X_AXIS_setting.show_grid_lines ? '#e6e6e6' : 'transparent',
        gridLineWidth: 1,
        categories: chart_data[chart_data.length - 1].label,
        crosshair: true,
        labels: {
            style: {
                fontSize: this.chart_settings.X_AXIS_setting.font_size + 'px',
                color: this.chart_settings.X_AXIS_setting.font_color,
                fontWeight: this.chart_settings.X_AXIS_setting.font_style.bold,
                fontStyle: this.chart_settings.X_AXIS_setting.font_style.italic,
                textDecoration: this.chart_settings.X_AXIS_setting.font_style.underline,
                'font-family': this.chart_settings.X_AXIS_setting.font_family + ', sans-serif'
            },
            format: x_axes_label.prefix + '{value}' + x_axes_label.suffix
        }
    },
    yAxis: {
        visible: this.chart_settings.Y_AXIS_setting.show_label,
        gridLineColor: this.chart_settings.Y_AXIS_setting.show_grid_lines ? '#e6e6e6' : 'transparent',
        gridLineWidth: 1,
        reversedStacks: false,
        min: 0,
        title: {
            text: ''
        },
        labels: {
            style: {
                fontSize: this.chart_settings.Y_AXIS_setting.font_size + 'px',
                color: this.chart_settings.Y_AXIS_setting.font_color,
                fontWeight: this.chart_settings.Y_AXIS_setting.font_style.bold,
                fontStyle: this.chart_settings.Y_AXIS_setting.font_style.italic,
                textDecoration: this.chart_settings.Y_AXIS_setting.font_style.underline,
                'font-family': this.chart_settings.Y_AXIS_setting.font_family + ', sans-serif'
            },
            format: y_axes_label.prefix + '{value}' + y_axes_label.suffix
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            pointPadding: 0,
            borderWidth: 0,
            depth: 25
        },
        line: {
            marker: {
                symbol: this.chart_settings.legend_setting.symbol_type,
            }
        },
        bar: {
            stacking: 'normal',
            pointPadding: 0,
            borderWidth: 0
        },
        area: {
            stacking: 'normal',
            marker: {
                symbol: this.chart_settings.legend_setting.symbol_type
            }
        },
        pie: {
            borderColor: 'rgba(255,255,255,0)',
            innerSize: isdoughnut ? doughnut_circle_size + '%' : '0%',
            showInLegend: true,
            dataLabels: {
                format: this.chart_settings.pie_label_setting.format_value == 'value' ? this.chart_settings.label_setting.label_values.prefix + '{y}' + this.chart_settings.label_setting.label_values.suffix : '{point.percentage:.1f}%',
                connectorWidth: this.chart_settings.pie_label_setting.connector_thick,
                padding: 1
            },
            depth: this.chart_settings.threed_chart_settings.depth_value,
            startAngle: this.select_chart_type == "semi-doughnut" ? -90 : undefined,
            endAngle: this.select_chart_type == "semi-doughnut" ? 90 : undefined,
            center: this.select_chart_type == "semi-doughnut" ? ['50%', '85%'] : [null, null],
            size: this.select_chart_type == "semi-doughnut" ? '120%' : null
        },
        cylinder: {
            colors: chart_data[chart_data.length - 1].color_array,
            colorByPoint: true
        },
        series: {
            animation: false,
            dataLabels: {
                enabled: this.chart_settings.label_setting.show_label,
                style: {
                    textShadow: false,
                    textOutline: 'none',
                    fontSize: this.chart_settings.label_setting.font_size + 'px',
                    color: this.chart_settings.label_setting.font_color,
                    fontWeight: this.chart_settings.label_setting.font_style.bold,
                    fontStyle: this.chart_settings.label_setting.font_style.italic,
                    textDecoration: this.chart_settings.label_setting.font_style.underline,
                    'font-family': this.chart_settings.label_setting.font_family + ', sans-serif'
                },
                format: this.chart_settings.label_setting.label_values.prefix + "{y}" + this.chart_settings.label_setting.label_values.suffix
            }
        },
    },
    series: dataSeries
});
解决方案

要让折线图的图例仅显示圆形/方形标记、去掉附带的线条,只需在现有配置基础上添加一个关键设置:

在plotOptions.line配置块中加入legendSymbol: 'marker',指定折线图的图例符号仅渲染标记,不包含默认的线条。

修改后的plotOptions.line片段如下:

line: {
    marker: {
        symbol: this.chart_settings.legend_setting.symbol_type,
    },
    legendSymbol: 'marker' // 强制图例只显示标记符号
}

如果你的项目中还有面积图(area)也需要相同效果,同样可以在plotOptions.area中添加legendSymbol: 'marker';要是想让所有系列统一生效,把该配置放到plotOptions.series下即可。

内容的提问来源于stack exchange,提问作者yash chapani

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.18 01:05:57