我正在尝试使用Anychart开发向下钻取功能。我找到了一个使用向下钻取选项的链接,但文档非常陈旧,我无法在Anychart文档中找到有关图表深入的最新文档。官方Anychart文档中提供了地图向下钻取,但我需要图表向下钻取功能。
到目前为止,我尝试使用以下代码生成向下钻取,但在向下钻取事件中,无法从事件参数中获取数据或任何其他属性的值。
我试图记录未定义的e.data属性。让我知道如何实现这一点,或者可以指向Anychart中提供的文档。
示例代码:
<html>
<head>
<script src="https://cdn.anychart.com/js/7.13.0/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<script type="text/javascript">
anychart.onDocumentReady(function() {
anychart.format.inputDateTimeFormat('MM.dd.yyyy hh:mm:ss');
chart = anychart.fromJson({
chart: {
type:'line',
xAxes: [{
labels: {
textFormatter: formatter,
rotation: -40
}}],
scales: [{ type: 'dateTime'
}],
xScale: '0',
yScale: {
minimum: -1
},
series: [
{
seriesType: 'spline',
name: 'OCRTest',
connectMissingPoints:true,
tooltip: {
titleFormatter: tooltipFormatter,
textFormatter: textFormatterToolTip
},
stroke: {
color: '#008000',
thickness: 2
},
data:[
{"x":"03.09.2017 12:01:24","value":0.8270},
{"x":"03.09.2017 12:11:25","value":0.9520},
{"x":"03.09.2017 12:21:25","value":0.9210},
{"x":"03.09.2017 12:31:25","value":0.9200},
{"x":"03.09.2017 12:41:23","value":0.2960},
{"x":"03.09.2017 12:51:25","value":0.1410},
{"x":"03.09.2017 01:01:23","value":0.7800},
{"x":"03.09.2017 01:11:24","value":0.4210},
{"x":"03.09.2017 01:21:25","value":0.0630},
{"x":"03.09.2017 01:31:25","value":0.8420},
{"x":"03.09.2017 01:41:25","value":0.7640},
{"x":"03.09.2017 01:51:24","value":0.1870},
{"x":"03.09.2017 02:01:28","value":0.1870},
{"x":"03.09.2017 02:11:25","value":0.8270},
{"x":"03.09.2017 02:21:24","value":0.7170},
{"x":"03.09.2017 02:31:24","value":0.9200},
{"x":"03.09.2017 02:41:27","value":0.4680},
{"x":"03.09.2017 02:51:24","value":0.9360}
]}],
'xScroller': {
'enabled': true,
},
container:'container',
'tooltip': {
'title': {
'enabled': true,
},
'displayMode': 'single',
'enabled': true
}}
}).draw();
chart.addEventListener('pointClick', onPointClick);
var credits = chart.credits();
credits.enabled(false);
});
function tooltipFormatter(){
return anychart.format.dateTime(this.x, 'MMM dd yyyy h:mm');
}
function formatter(){
return anychart.format.dateTime(this.tickValue, 'MMM dd yyyy h:mm');
}
function textFormatterToolTip(){
return this.seriesName + ': ' + this.value;
}
function onPointClick(e)
{
console.log(e.data);
}
</script>
<body>
<div id="container"></div>
</body>
</html>
答案 0 :(得分:0)
addEventListener()是不推荐使用的方法,它在6.x版本中使用。请定义适当的侦听器来处理点事件:
chart.listen("pointClick", function(e){
onPointClick(e);
});
我根据您的数据制作了示例来说明这个想法: http://jsfiddle.net/e570c09j/
此外,有关如何创建钻取图表的更多信息,请在此处找到: https://docs.anychart.com/Common_Settings/Interactivity#drilldown
您可以在此处找到有关侦听器和支持的事件的更多信息: https://docs.anychart.com/Common_Settings/Event_Listeners
看一下下面的示例,它使用了&#39; pointSelect&#39;监听器创建交互式图表: http://playground.anychart.com/docs/7.13.0/samples/CS_Interactivity_13-plain