如何在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
相关产品推荐
相关产品推荐

