作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
带 Highcharts 的堆积柱形图。我怎样才能实现这样的东西?
我在左侧和右侧使用了 4 个具有不同值的附加绘图线,但问题是如何隐藏 y 轴上 Q1 和 Q2 的值并仅显示绘图线?
代码
Highcharts.chart('container', {
chart: {
type: "column",
margin: [100, 120, 30, 100],
height: 440,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: "transparent"
},
title: {
text: "",
align: "center",
x: -140,
y: 12,
floating: true,
style: {
fontSize: "23px",
fontWeight: "300"
}
},
xAxis: {
categories: ['Q1 2018', 'Q4 2017'],
tickWidth: 0,
gridLineWidth: 0,
tickLength: 0,
tickWidth: 0
},
yAxis: {
title: {
text: "Bonus Criteria",
x: -45,
opposite: true,
},
title: {
text: ''
},
tickWidth: 0,
gridLineWidth: 0,
tickLength: 0,
tickWidth: 0,
tickPosition: "outside",
labels: {
align: "left",
x: -30,
y: 0
},
lineWidth: 1,
plotLines: [
{
color: "black",
// Average here
value: 120,
width: "2",
label: {
text: '0',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 2nd criteria for bonus
{
color: "green",
// Average here
value: 180,
width: "2",
label: {
text: '10,000',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 3rd criteria for bonus
{
color: "green",
// Average here
value: 240,
width: "2",
label: {
text: '20,000 ',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 4th criteria for bonus
{
color: "yellow",
value: 300,
width: "2",
label: {
text: '30,000',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
}
]
},
plotOptions: {
legend: {
enable: false
},
series: {
stacking: 'normal'
},
column: {
colorByPoint: true
}
},
colors: [
'#05a0f0',
'#aaddfa',
],
series: [{
data: [29.9, 71.5]
}, {
data: [144.0, 176.0]
}, {
data: [70, 60]
}],
dataLabels: {
enabled: true
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
},
});
这是一个指向 jsfiddle 的内嵌链接.
最佳答案
使用以下方法旋转 y 轴标签:
yAxis: {
lables: {
enabled: false
},
...
}
然后将 plotLines 设置到左侧,如:
yAxis: {
plotLines: {
color: "black",
value: 120,
width: "2",
label: {
text: '0%', //Visible text
align: "left", //left axis
fontWeight: "bold",
fontSize: "16",
x: -30, // xAxis offset
y: 5
},
zIndex: 2
}
...
}
此外,我禁用了图例:
legend: {
enabled: false
}
这会让你得到与你所追求的非常相似的东西。
Highcharts.chart('container', {
chart: {
type: "column",
margin: [100, 120, 30, 100],
height: 440,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: "transparent"
},
title: {
text: "",
align: "center",
x: -140,
y: 12,
floating: true,
style: {
fontSize: "23px",
fontWeight: "300"
}
},
legend: {
enabled: false
},
xAxis: {
categories: ['Q1 2018', 'Q4 2017'],
tickWidth: 0,
gridLineWidth: 0,
tickLength: 0,
tickWidth: 0
},
yAxis: {
title: {
text: "Bonus Criteria",
x: -45,
opposite: true,
},
title: {
text: ''
},
tickWidth: 0,
gridLineWidth: 0,
tickLength: 0,
tickWidth: 0,
tickPosition: "outside",
labels: {
enabled: false,
align: "left",
x: -30,
y: 0
},
lineWidth: 1,
plotLines: [{
color: "black",
// Average here
value: 120,
width: "2",
label: {
text: '0%',
align: "left",
fontWeight: "bold",
fontSize: "16",
x: -30,
y: 5
},
zIndex: 2
},
// 2nd criteria for bonus
{
color: "green",
// Average here
value: 180,
width: "2",
label: {
text: '5%',
align: "left",
fontWeight: "bold",
fontSize: "16",
x: -30,
y: 5
},
zIndex: 2
},
// 3rd criteria for bonus
{
color: "green",
// Average here
value: 240,
width: "2",
label: {
text: '10%',
align: "left",
fontWeight: "bold",
fontSize: "16",
x: -30,
y: 5
},
zIndex: 2
},
// 4th criteria for bonus
{
color: "yellow",
value: 300,
width: "2",
label: {
text: '15%',
align: "left",
fontWeight: "bold",
fontSize: "16",
x: -30,
y: 5
},
zIndex: 2
},{
color: "black",
// Average here
value: 120,
width: "2",
label: {
text: '0',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 2nd criteria for bonus
{
color: "green",
// Average here
value: 180,
width: "2",
label: {
text: '10,000',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 3rd criteria for bonus
{
color: "green",
// Average here
value: 240,
width: "2",
label: {
text: '20,000 ',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 4th criteria for bonus
{
color: "yellow",
value: 300,
width: "2",
label: {
text: '30,000',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
}
]
},
plotOptions: {
legend: {
enable: false
},
series: {
stacking: 'normal'
},
column: {
colorByPoint: true
}
},
colors: [
'#05a0f0',
'#aaddfa',
],
series: [{
data: [29.9, 71.5]
}, {
data: [144.0, 176.0]
}, {
data: [70, 60]
}],
dataLabels: {
enabled: true
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
关于javascript - HighChart 堆积柱形条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49386615/
我使用 Dojo fadeIn 和 fadeOut 以及一个计时器旋转了三个堆叠图像。只有最后一个的 href 可用。是否也可以旋转 href? 这是它的 CSS: #main-slides
给定一个 numpy 数组,我想总结统一的元素 block 以形成一个新的、更小的数组。它与分箱类似,但不是按频率分箱。除了通过示例(如下)之外,我不确定如何描述它。 问题:是否有用于此的函数或更清晰
我正在尝试实现某种按钮控制的幻灯片放映,其中包括用于页面顶部全 Angular 图片的 div,用于页面顶部的 div页面底部的另一张全 Angular 图片和中央内容的最终 div(包括控制“幻
嘿,我正在使用 D3JS 作为图表库,我真的很想利用气泡图中的超酷功能。上主D3JS chart站点下面的Bubble Chart用来比较两组数据: Bubble Chart . 我想知道是否有人真的
我是一名优秀的程序员,十分优秀!