Question

我正在使用TreeMap，我可以在Hover上为特定数据点提供borderColor。在这个小提琴链接中相同 - ＆gt; http://jsfiddle.net/vgnshs/z8ncv2d5/。

但是我需要一个要求，我应该在点击特定的dataPoint时获得相同类型的borderColor（告诉用户选择了Point）和borderColor应该持续，直到我再次点击同一点或者plotArea之外的某个地方。（我看到这个功能在气泡图中可用，在TreeMap中也是如此）。此外，我应该能够选择多个点，所有选定的点应该具有相同的borderColor。

目前，TreeMap的选择事件使用我不想要的不同颜色填充整个点。只应更改borderColor。我怎样才能在TreeMap中实现这个目标？

＆＃13;

$(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
            }]
        }]

    });

});

＆＃13;

#container {
    min-width: 300px;
    max-width: 600px;
    margin: 0 auto;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以设置选择状态并配置color as false。下一步是通过设置useHTML as true and zIndex as 30来配置数据标签。

示例：http://jsfiddle.net/z8ncv2d5/3/

点击点继续标记状态-Treemap - Highchart

1 个答案: