在点按-树状图-高图上保持标记状态

Persist Marker state on point click -Treemap - Highchart

本文关键字:状态 高图      更新时间:2023-09-26

我正在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/