我今天才刚开始使用highchart。我有以下查询。谁能帮我？
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['HIGH', 'MODERATE', 'CRITICAL'],
data = [{
y: 33.33,
color: '#a6b9c1',
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0'],
data: [0.5, 0.5],
color: ['#30add9','#306885']
}
}, {
y: 33.33,
color: '#a6b9c1',
drilldown: {
name: 'Firefox versions',
categories: ['Firefox v31', 'Firefox v32'],
data: [0.5, 0.5],
color: ['#30add9','#306885']
}
}, {
y: 33.33,
color: '#a6b9c1',
drilldown: {
name: 'Chrome versions',
categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0'],
data: [0.34, 0.33, 0.33],
color: ['#23377b','#30add9','#306885']
}
}],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: data[i].drilldown.color[j]
});
}
}
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'OUR<br>MATERIAL<br>ISSUES',
align: 'center',
verticalAlign: 'middle',
y: 0
},
subtitle: {
text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
},
plotOptions: {
pie: {
shadow: false,
// borderWidth:10,
center: ['50%', '50%'],
slicedOffset: 10,
states: {
hover: false
}
}
},
tooltip: {
enabled: false
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
innerSize: '50%',
dataLabels: {
formatter: function () {
return this.point.name;
},
color: '#3f377f',
rotation: -20,
// rotation: rotate(),
distance: -40
}
}, {
name: 'Versions',
data: versionsData,
// borderWidth:0,
size: '100%',
innerSize: '60%',
dataLabels: {
// useHTML:true,
formatter: function () {
return this.point.name;
},
color: '#000'
//inside:true
},
allowPointSelect: false,
stickyTracking: false,
point: {
events: {
mouseOver: function() {
var point = this,
points = this.series.points;
// unslice sliced element(s)
for (var key in points) {
if (points[key].sliced) {
points[key].slice(false);
}
}
// slice hovered element
if (!point.selected) {
point.slice(true);
}
}
}
},
events: {
mouseOut: function(event) {
// unslice sliced element(s)
for (var key in this.points) {
if (this.points[key].sliced) {
this.points[key].slice(false);
}
}
}
}
}]
});
});
FIDDLE
在第一个级别上，有3个级别-高，关键和中等。如果我使用旋转：-20和距离：-40，则可以正确对齐关键标签。我想要对所有3个标签进行这种对齐。谁能帮我怎么做？
我还想根据附件图像在第二级添加数据。每个数据将具有与之关联的超链接。截至目前，您只能看到一个标签-MSIE 6和类似的标签，我想添加多个看起来与附件图像相似的标签。我已经尝试了很多，但无法操作。enter image description here
更新-我做了其他一些工作，还使图表响应。但是我对此有一些疑问。
是否可以将曲线赋予图像中出现的内部标签-HIGH，CRITICAL和MODERATE？
我在第二层甜甜圈图中看到了ul-li结构，以获取信息。截至目前，您已经使用
<br>标记来换行，但由于此图表也具有响应性，因此我们不能为div设置宽度，以便在调整大小的情况下，如果数据不足，则将由所有7个切片的div宽度-完成此外，div内有一个跨度，该跨度会自动上下移动，这就是为什么整个信息ul-li结构都有些不利的原因。是否可以基于位置计算每个第二级甜甜圈图并将其应用？我不明白如何将动态CSS应用于它
ul中的每个li都会有一个链接。因此，在点击该li时-我可以转到该特定页面-我尝试应用它但成功了。 -
名称：
<ul><li><a href="http://wikipedia.org" target="_blank">text in first line</a></li><li>second line</li><li>third line<br/>that was long</li></ul>
这就像一个魅力。但是单击后，如果我从打开的页面回到该页面，切片效果仍然存在，我能做些什么？
在1级甜甜圈图上，有3个标签。但是其中有2个具有不同的结构，而1个具有其他结构。我不明白背后的原因。如果您可以打开开发人员工具并进行检查，则可以清楚地看到它们之间的区别。一个人有
<g> - <text> - <tspan>，而另一个人有<div> - <span>有人可以解释吗？ 最佳答案
让我们将此图表分为2个问题：
旋转的数据标签-旋转可根据dataLabel-API reference进行设置。可以创建一个自动设置所有dataLabels旋转角度的功能。
相似的主题：Rotating dataLabels in a Highcharts pie chart
Grzegorz's solution具有不同的旋转角度以更好地匹配您的图表：http://jsfiddle.net/j7as86gh/12/
切片文本-如果您的图表足够大以适合所有文本，则可以通过dataLables解决此问题。要启用每个切片中带点的列表，可以将useHTML的true设置为dataLabels。
a）http://jsfiddle.net/3v3xfh6e/
另一种方法是使用工具提示显示每个切片的信息。
b）http://jsfiddle.net/3v3xfh6e/1/
关于javascript - 如何在highchart中创建这样的饼图/甜甜圈图？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35540685/