在点按-树状图-高图上保持标记状态
Persist Marker state on point click -Treemap - Highchart
我正在TreeMap上工作,在那里我能够在特定数据点的悬停上给予borderColor。同样在这个小提琴链接-> http://jsfiddle.net/vgnshs/z8ncv2d5/。
但我需要的要求,我应该得到相同类型的borderColor在点击一个特定的数据点(对用户说,点被选中)和borderColor应该持续,直到我再次点击同一点或plotArea以外的地方。(我看到这个功能是可用的气泡图,同样需要在TreeMap)。此外,我应该能够选择多个点,所有被选中的点应该有相同的borderColor。
目前,TreeMap的选择事件用不同的颜色填充整个点,这是我不想要的。只有borderColor应该被改变。我如何在TreeMap中实现这一点?
$(function () {
$('#container').highcharts({
"chart": {
"width": 640,
"height": 480
},
"colorAxis": {
"minColor": "#202020",
"maxColor": "#B0B0B0"
},
"title": {
"text": "Datalabel Sample"
},
"subtitle": {
"text": null
},
"credits": {
"enabled": false
},
"tooltip": {
"enabled": false
},
"plotOptions": {
"series": {
"states": {
"hover": {
"borderColor": "#0000FF",
"borderWidth": 1
}
}
}
},
"legend": {
"align": "right",
"layout": "vertical",
"verticalAlign": "middle",
"symbolHeight": 380,
"enabled": true
},
"series": [{
"type": "treemap",
"layoutAlgorithm": "squarified",
"allowDrillToNode": true,
"dataLabels": {
"enabled": false
},
"levels": [{
"level": 1,
"dataLabels": {
"enabled": true,
"color": "#FFFFFF",
"allowOverlap": false,
"align": "center",
"style": {
"fontWeight": "normal",
"fontSize": "24px",
"fontStyle": "normal",
"fontFamily": "'Open Sans', Arial, Helvetica, sans-serif",
"textShadow": null
},
"overflow": false
},
"borderWidth": 1
}],
"data": [ {
"id": "Apparel",
"name": "Apparel",
"value": 130.1,
"colorValue": 130.1,
"expanded": false,
"canexpand": false
}, {
"id": "Footwear",
"name": "Footwear",
"value": 90.7,
"colorValue": 90.7,
"expanded": false,
"canexpand": true
}, {
"id": "Accessories",
"name": "Accessories",
"value": 180.5,
"colorValue": 180.5,
"expanded": false,
"canexpand": true
}]
}]
});
});
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
可以设置选择状态和配置color as false
。下一步是配置数据标签,通过设置useHTML as true and zIndex as 30
。
示例:http://jsfiddle.net/z8ncv2d5/3/
相关文章:
- 动态更改高图中的系列颜色
- 如何为高图中的区域线创建z索引
- 将高图饼图中的文本居中显示为响应
- 可以对一个图表进行高图深化,反映在另一个图表上
- 如何将数据标签与数据一起传递,以便在高图中的工具提示中显示
- 如何在悬停时更改高图的不透明度
- 升级到 jQuery 1.8 后出现高图缩放问题
- 高图3.0.7是否允许高图
- 指定饼图高图的颜色
- 高图热图:单击按钮或复选框时选择所有单元格
- 高图 - 分组/近似后保持多个系列之间的关系
- 高图折线图:点应该是可点击的,点之间的线不是.这可能吗
- 如何防止高图工具提示弹出隐藏,在图形区域或浏览器窗口上调整大小
- 数据库中的动态样条曲线高图
- 删除高图中的第一条和最后一条网格线
- 解决同时使用高图和树状图时的冲突(f.inArray 不是函数)
- 将高图重置为初始状态
- 高图-散点图标记悬停状态持续时间过长
- 当点标记被禁用时,无法在高图中设置“选定”状态
- 在点按-树状图-高图上保持标记状态