英文:
Add "a" tag to Highcharts Org Chart
问题
我想在Highcharts组织图中进行一些更改。我想要将“board”节点更改为“a”标签,以便用户能够单击它。你能帮我吗?如何做到这一点?谢谢你这么多。
英文:
I am going to make some changes in Highcharts Org Chart. I want to add an "a" tag to only one of the nodes of Highcharts Organization Chart ][enter link description here][1]
For example I want to change'board' node to an 'a' tag so the user can be able to click on it. can you please help me How can I do that?
Thank you so much
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
Highcharts.chart('container', {
chart: {
height: 600,
inverted: true
},
title: {
text: 'Highcharts Org Chart'
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var nodeName = point.toNode.name,
nodeId = point.toNode.id,
nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
parentDesc = point.fromNode.id;
return point.index + '. ' + nodeDesc + ', reports to ' + parentDesc + '.';
}
}
},
series: [{
type: 'organization',
name: 'Highsoft',
keys: ['from', 'to'],
data: [
['Shareholders', 'Board'],
['Board', 'CEO'],
['CEO', 'CTO'],
['CEO', 'CPO'],
['CEO', 'CSO'],
['CEO', 'HR'],
['CTO', 'Product'],
['CTO', 'Web'],
['CSO', 'Sales'],
['HR', 'Market'],
['CSO', 'Market'],
['HR', 'Market'],
['CTO', 'Market']
],
levels: [{
level: 0,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 1,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 2,
color: '#980104'
}, {
level: 4,
color: '#359154'
}],
nodes: [{
id: 'Shareholders'
}, {
id: 'Board'
}, {
id: 'CEO',
title: 'CEO',
name: 'Atle Sivertsen',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2022/06/30081411/portrett-sorthvitt.jpg'
}, {
id: 'HR',
title: 'CFO',
name: 'Anne Jorunn Fjærestad',
color: '#007ad0',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131210/Highsoft_04045_.jpg'
}, {
id: 'CTO',
title: 'CTO',
name: 'Christer Vasseng',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131120/Highsoft_04074_.jpg'
}, {
id: 'CPO',
title: 'CPO',
name: 'Torstein Hønsi',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131213/Highsoft_03998_.jpg'
}, {
id: 'CSO',
title: 'CSO',
name: 'Anita Nesse',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131156/Highsoft_03834_.jpg'
}, {
id: 'Product',
name: 'Product developers'
}, {
id: 'Web',
name: 'Web devs, sys admin'
}, {
id: 'Sales',
name: 'Sales team'
}, {
id: 'Market',
name: 'Marketing team',
column: 5
}],
colorByPoint: false,
color: '#007ad0',
dataLabels: {
color: 'white'
},
borderColor: 'white',
nodeWidth: 65
}],
tooltip: {
outside: false
},
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});
<!-- language: lang-css -->
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
#container h4 {
text-transform: none;
font-size: 14px;
font-weight: normal;
}
#container p {
font-size: 13px;
line-height: 16px;
}
@media screen and (max-width: 600px) {
#container h4 {
font-size: 2.3vw;
line-height: 3vw;
}
#container p {
font-size: 2.3vw;
line-height: 3vw;
}
}
<!-- language: lang-html -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Organization charts are a common case of hierarchical network charts,
where the parent/child relationships between nodes are visualized.
Highcharts includes a dedicated organization chart type that streamlines
the process of creating these types of visualizations.
</p>
</figure>
<!-- end snippet -->
答案1
得分: 1
你可以给标题/名称添加href属性,但那样只有文本可点击。如果要使整个节点可点击,请使用点击事件。
节点:
{
id: 'C',
key: 'Cinnamon',
events: {
click() {
location.href = 'https://en.wikipedia.org/wiki/' +
this.options.key;
}
}
}
演示:
https://jsfiddle.net/BlackLabel/Lgq37pjv/
API 参考:
https://api.highcharts.com/highcharts/series.organization.point.events.click
英文:
You can add href attribute to the title/name, but then only the text will be clickable. If you want to make clickable the whole node, use click event.
nodes: [
{
id: 'C',
key: 'Cinnamon',
events: {
click() {
location.href = 'https://en.wikipedia.org/wiki/' +
this.options.key;
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/Lgq37pjv/
API Reference:
https://api.highcharts.com/highcharts/series.organization.point.events.click
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论