使用 jquery 显示图例
Posted
技术标签:
【中文标题】使用 jquery 显示图例【英文标题】：Show legend using 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图表发生的事情之间是否需要联系？ 是的，这将完全独立于融合图表 【参考方案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 + "'> </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
【讨论】：
感谢您的回复。我已经尝试过了。我正在使用堆栈图，所以这不能按我想要的方式工作。 是的，我正在使用融合图来显示堆栈图。在此图表中，根据数据重复了一些系列名称。这里的问题是，当系列重复时，它会再次单独显示在图例中。我想避免这种情况。以上是关于使用 jquery 显示图例的主要内容，如果未能解决你的问题，请参考以下文章