问题描述
我有一个TreeMap，其中有一个父级，父级有两个子级。 在单击父项时，我想触发一个click事件，因此我将“ allowDrillToNode”设置为false。 但是，将鼠标悬停在一张图表上时，父级的datalabel隐藏了。 但是，即使将鼠标悬停在图表上，我也需要使父数据标签可见。 我尝试过的代码在这个小提琴中->
$(function () { var points = [{ "id" : "id_0", "name" : "Software" , "color":"rgb(64,64,64)", "value" : 50, }, { "id" : " ", "name" : "" , "color":"rgb(104,104,104)", "value" : 30, "parent" : "id_0" }, { "id" : " ", "name" : "" , "color":"rgb(184,184,184) ", "value" : 20, "parent" : "id_0" } ]; var options ={ credits: { enabled: false }, chart: { renderTo : "container" }, tooltip : { enabled : false }, series: [{ type: "treemap", layoutAlgorithm: 'squarified', dataLabels: { enabled: true, hideWhenOverlap : false }, levels: [{ level: 1, dataLabels: { enabled: true }, borderWidth: 3 }], events : { click : function(drillDownevent) { alert("click received"); } }, data: points }], title: { text: "TreeMap" } }; var chart1 = new Highcharts.Chart(options); });
#container { min-width: 300px; max-width: 600px; margin: 0 auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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><br/><br/>
1楼
只需在级别下的dataLabels中将useHTML属性设置为true即可。
这项工作对我来说。
dataLabels: {
useHTML: true,
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold',
}
}