高图的CSS实现不工作
Callouts CSS implementation for highcharts not working
我试图建立一个callout并通过CSS格式化callout。由于某些原因,css的实现不能正常工作。
HTML:<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>
CSS: div.callout {
height: 20px;
width: 100px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.top::before {
left: 45%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
left: 7px;
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
right: 7px;
bottom: -20px;
border-top: 10px solid #444;
}
JS:
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
dataLabels: {
enabled: true,
align: 'left',
crop: false,
style: {
fontWeight: 'bold'
},
x: 3,
verticalAlign: 'middle',
formatter: function() {
return '<div class="callout" data-name="Jane">This is a test message</div>';
}
},
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
http://jsfiddle.net/n0axohL6/1/Highcharts的文档说明只有HTML的一个子集可用于文本和标签:
Highcharts中的文本和标签是用HTML给出的,但由于HTML是用SVG解析和呈现的,因此只支持一个子集。支持以下标签:<b>, <strong>, <i>, <em>, <br/>, <span>
。span可以使用style属性来设置样式,但只处理与SVG共享的与文本相关的CSS。
即使这样,HTML也被转换为SVG节点,因此您将无法使用div和CSS类来为图表中的文本设置样式。
看起来Highcharts 5中有一个通过CSS类进行样式化的选项:http://www.highcharts.com/docs/chart-design-and-style/style-by-css
相关文章:
- 实现幻灯片放映后,导航菜单无法工作
- 如何实现nanoScroller,使其正确工作
- 在节点中,使用Q,使两个函数并行工作,但只等待第一个函数实现其承诺
- config.fullPage = true;在 ckEditor 内联模式下无法正常工作.如何实现这一点
- 数据表正则表达式搜索无法按预期工作以实现完全匹配
- Javascript + Quicksort:这个维基百科实现是如何工作的
- Facebook喜欢在Firefox中不可点击的按钮iframe实现,可以在其他浏览器中工作
- 如何实现 emit 以同步方式工作
- Jquery为我的插件实现了一个成功和错误回调,该插件与AJAX一起工作
- AngularJs Jcarousel实现仅在调整页面大小后才能工作
- 如何删除有缺陷的服务工作线程,或实现“终止开关”
- 通过clone()实现对象继承是如何工作的
- 重新实现Array.prototype.slice的JavaScript谜题未按预期工作
- 这个AngularJS是如何工作的;HelloWorld"应用有些人怀疑Angular是如何实现MVC模式的
- 当我为来自服务器的数据实现了更多的angular js代码时,Carousel停止了工作
- 转义字符的实现是否在JavaScript和PHP中类似地工作,或者两者的实现是否有任何差异
- 实现“喜欢”功能的问题.函数只工作一次
- 映射/设置与ie8工作的实现
- 如何在AngularJS中使用Promises实现同步工作流
- 实现了AngularJS视图,现在Nivo Slider不能工作了