使用 jquery 显示图例

Question

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

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

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

谁能告诉我怎么做？谢谢

Answer 1

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

Answer 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>

Answer 3

您可以将 table 数据存储为 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();

这是结果：

使用 jquery 显示图例

Show legend using jquery

javascript

jquery

charts

legend

fusioncharts