使用 jquery 显示图例答案

【问题标题】：Show legend using jquery使用 jquery 显示图例
【发布时间】：2018-06-27 02:15:31
【问题描述】：

我正在使用 Fusion Charts 创建一些图表。由于一些问题，我必须单独显示图例，而不是使用融合图表提供的图例。
我有一个表格数据，其中有状态及其十六进制颜色。

status  code
A       #006400
B       #FFFFFF
C       #FFFF00
D       #90EE90
E       #FFA500

我需要使用 jquery 或 javascript 在我的页面上以图例的形式显示它。
类似的东西
A 然后显示 A 的颜色
B然后显示B的颜色
等等。

谁能告诉我怎么做？谢谢。

【问题讨论】：

此解决方案是否完全独立于 Fusion 图表？ jQuery制作的图例与Fusion图表发生的事情之间是否需要联系？
是的，这将完全独立于融合图表

标签： javascript jquery charts legend fusioncharts

【解决方案1】：

您可以将表数据存储为 json：

legend_data = [
    {
    'status' : 'A',
    'code' : '#006400'
    },
    {
    'status' : 'B',
    'code' : '#FFFFFF'
    },
    {
    'status' : 'C',
    'code' : '#FFFF00'
    },
    {
    'status' : 'D',
    'code' : '#90EE90'
    },
    {
    'status' : 'E',
    'code' : '#FFA500'
    }
    ]

在您的 html 中创建一个 div 来保存图例信息：

<html>
<body>
<div id='legend'></div>
</body>
</html>

添加 CSS 样式：

body {
  color: white;
}
#legend {
  width: 100px; 
  height: 150px; 
  border-radius: 3px; 
  background: grey;
  padding: 10px;  
  font-family: arial; 
}
.circle {
  width: 20px; 
  border-radius: 100%;
}

在 JS/jQuery 中编写一个函数，它将 将您的 legend_data 加载到 #legend div 中：

function create_legend() {
   $.each(legend_data, function(index, element) {
       col = element.code;
       $('#legend').append("<table width='100%'><td align='center' style='font-size: 20px'>" + element.status + "</td><td align='center'><div class='circle' style='background: " + col + "'>&nbsp;</div></td></table>"); 
   });
}

create_legend();

这是结果：

【讨论】：

【解决方案2】：

你可以试试这个，

JS代码：

 var StatusDiv = '';
  $.ajax({
            type: "GET",
            url: 'URL',
            dataType: "JSON ",
            success: function (data) {
                var result = data;
                $.each(result, function (i, Status) {
                    StatusDiv += '<div style="font-size:12px;margin-right:8px;float:left;" title="' + Status.name + '"><div style="height:15px;width:15px;margin-top:0px;background-color:' + Status.color + ';float:left"></div><div style="float:none;padding-left:17px;">' + Status.name + '</div></div>';
                });
                $('#StatusColorDescription').html(StatusDiv);
            },
            error: function (result) {
            }
        });

HTML：

<div id="StatusColorDescription" style="float:left"></div>

【讨论】：

【解决方案3】：

您可以使用 "colorrange": 属性获取图例颜色条件或访问本文以获取更多帮助...
legend-options

【讨论】：

感谢您的回复。我已经尝试过了。我正在使用堆栈图，所以这不能按我想要的方式工作。
是的，我正在使用融合图来显示堆栈图。在此图表中，根据数据重复了一些系列名称。这里的问题是，当系列重复时，它会再次单独显示在图例中。我想避免这种情况。