Question

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

Answer 1

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

如何使用Anychart向下钻取图表

1 个答案: