Question

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

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

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

任何人都可以告诉我如何做到这一点？感谢。

Answer 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();

以下是结果：

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

您可以将 "colorrange": 属性用于图例颜色条件或获取更多帮助，请访问此文章...
legend-options

使用jquery

3 个答案: