问如何使用Anychart深入查看图表
EN

Stack Overflow用户

提问于 2017-03-15 15:40:29

回答 1查看 303关注 0票数 0

我正在尝试使用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>

anychart

回答 1

Stack Overflow用户

发布于 2017-03-16 06:36:42

addEventListener()是不推荐使用的方法，它在6.x版本中使用。请定义相应的侦听器来处理points事件：

    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

看看下面的示例，它使用'pointSelect‘侦听器来创建交互式图表：http://playground.anychart.com/docs/7.13.0/samples/CS_Interactivity_13-plain

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42803693

复制

相似问题

问如何使用Anychart深入查看图表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Anychart深入查看图表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Anychart深入查看图表
EN