Question

我正在尝试使用Highcharts创建一个简单的柱形图。我希望能够在底部显示图例，其中图例符号与条形图相同，后跟值和类别。出于某种原因，我只看到第一个图例符号。这是来源https://jsfiddle.net/DeanSharma/gjbfj0rg/

$(function() {
  var categories = ["Open","Expire within 90 days","In Progress","Past"],
     colors = ["#1097ae","#81cbd6","#b4d66c","#317fc2"],
     data = [9,13,7,8];
  var chartData = [{y: 9, color: '#1097ae', name: 'Open'}, {y: 13, color: '#81cbd6', name: 'Expire within 90 days'}, {y: 7, color: '#b4d66c', name: 'In Progress'}, {y: 8, color: '#317fc2', name: 'Past'}];
    var customLegend = '<div class="legend" style="vertical-align: bottom; background-color: transparent">';
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'column',
      height: 400,
      marginBottom: 100,
      align: 'top'
    },
    title: {text:'My Custom Column Chart', align:'center', style:{"font-size":'14px',"color":'#0000ff'}},
    colors: colors,
    legend: {
      align: 'center',
      enabled: true,
      floating: true,
      symbolWidth: 0,
      labelFormatter: function() {            
        for(index=0; index< categories.length; index++) {
          customLegend    += '<div style="background-color:' + colors[index]  + ' ; width:12px; height:12px;"></div>';
          customLegend    += '<div class="legend__value">' + data[index] + '  </div>';
          customLegend    += '<div class="legend__name">' + categories[index] + '  </div>';
          customLegend    += '<br />';

        };
        customLegend += '</div>';
        return customLegend;
      },
      layout: 'horizontal',
      verticalAlign: 'bottom',
      y: 10
    },
    credits: {enabled: true, text: 'Courtesy DeanS', href:'stackoverflow.com'},
    xAxis: {
      categories: categories,
      labels: {autoRotation: false, 
        style: {color: '#777',fontFamily: 'Open Sans',fontSize: '10px'}
      },
      lineColor: '#f8f8f8',
      tickColor: '#f8f8f8'
    },
    yAxis: {
      title: {
        text: '',
        useHTML: true
      }
    },
    series: [{
      data: chartData    
    }]

  });
});

Answer 1

要获得该结果，您不需要自定义图例。您可以将您的点分成单独的系列，禁用分组，然后在标签格式器中 - 返回点的值和类别。

#!/usr/bin/env python3

import pygame

pygame.display.init()
screen = pygame.display.set_mode((512, 512))
screen.fill((255, 255, 255))
pygame.display.update()

while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.display.quit()
            exit()

传奇配置：

plotOptions: {
  series: {
    grouping: false
  }
},
series: data.map((point, i) => {
  return {
    data: [
      [i, point]
    ]
  }
})

示例：https://jsfiddle.net/gjbfj0rg/1/

Highcharts列图自定义图例格式不显示图例符号

1 个答案: