更改标签云
问题描述:
的背景颜色我有以下简单的代码在一个tagcloud词/标签:更改标签云
<a about="http://localhost/d456c6" href="http://localhost/d456c6" class="tagweight0 Resource">abda</a>
我想改变一个词的点击背景。问题是,我不只有一个词“tagweight0”。
这里我jQuery的示例代码:
$('tagweight0').livequery('click', function(event) {
$("tagweight0").toggleClass("select");
return false;
});
这是工作,但在点击带班“tagweight0”的所有单词都与变更的背景。我怎样才能改变背景只为选定的单词,而不是所有的标签?
编辑:我可以使用“href”或“about”参数进行更改吗?
答
$('.tagweight0').live('click', function(event) {
$(this).toggleClass("select");
return false;
});
答
从AnyChart的背景变化
<!doctype html>
<html>
<head>
<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/samples-data/tag-cloud/population-by-countries/data.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.test{
height: 20em;
border: 1px solid;
padding:0;
}
</style>
</head>
<body>
<div class="col-md-12 ">
<div class="col-md-4 test"><div id="container"></div></div><div class="col-md-4">hello2</div><div class="col-md-4">hello3</div>
</div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
// The data used in this sample can be obtained from the CDN
// https://cdn.anychart.com/samples-data/tag-cloud/population-by-countries/data.js
var data = getData();
var dataSet = anychart.data.set(data);
var colors = anychart.scales.ordinalColor().colors(['#26959f', '#f18126', '#3b8ad8', '#60727b', '#e24b26']);
// create tag cloud
chart = anychart.tagCloud();
chart.background().fill({
keys: ['#ccc'],
});
// set chart title
chart.title('World Population')
// set data with settings
.data(dataSet)
// set color scale
.colorScale(colors)
// set array of angles, by which words will be placed
.angles([-90, 0, 90]);
// get the color range
var colorRange = chart.colorRange();
// enabled color range
colorRange
.enabled(true)
// sets color line size
.colorLineSize(15);
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
// save normal fill function to variable
var normalFillFunction = chart.normal().fill();
// save hover fill function to variable
var hoveredFillFunction = chart.hovered().fill();
// create custom interactivity to hover colorRange
chart.listen('pointsHover', function(e) {
if (e.actualTarget === colorRange) {
// if points exist
if (e.points.length) {
// set settings for normal state
chart.normal({
fill: 'black 0.1'
});
// set settings for hovered state
chart.hovered({
// get fill color ratio by its number and set fill to hovered state
fill: chart.colorScale().valueToColor(e.point.get('category'))
});
} else {
// set function for normal state
chart.normal({
fill: normalFillFunction
});
// set function for hovered state
chart.hovered({
fill: hoveredFillFunction
});
}
}
});
});
</script>
</body>
</html>
现在的工作采取完整代码;) – cupakob 2009-08-26 08:25:11