个人中心
gpt4 book ai didi

javascript - amcharts 获取鼠标的实际 xValue(日期)

转载 作者：行者123 更新时间：2023-12-03 11:46:18 28 4
gpt4 key购买 nike

我按照教程进行操作:http://www.amcharts.com/tutorials/detecting-at-what-value-mouse-pointer-is/但我没有得到正确的值。这是代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sensor Diagramms</title>
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script src="amcharts/themes/black.js" type="text/javascript"></script>
<!-- amCharts javascript code -->
    <script type="text/javascript">
        var valueAxis;
        var chart;
        var chartData = [];
        var chartCursor;
        var date;
        loadCSV("MagnetField.txt");
        AmCharts.ready(function(){
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.type = "serial";
            chart.pathToImages = "amcharts/images/";
            chart.dataProvider = chartData;
            chart.categoryField = "date";
            chart.dataDateFormat = "DD-MM-YYYY HH:NN:SS.QQQ";

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.minPeriod = "fff";
            categoryAxis.parseDates = true;

            // CURSOR
            chartCursor = new AmCharts.ChartCursor();
            chartCursor.categoryBalloonDateFormat= "HH:NN:SS.QQQ";
            chartCursor.valueLineEnabled = true;
            chartCursor.bulletsEnabled = true;
            chartCursor.bulletSize = 2;
            chartCursor.oneBalloonOnly = true;
            chartCursor.addListener("moved", handleMove);
            chart.addChartCursor(chartCursor);

            // SCROLLBAR
            var chartScrollbar = new AmCharts.ChartScrollbar();
            chartScrollbar.usePeriod = "fff";
            chartScrollbar.autoGridCount = true;
            chartScrollbar.color = "#000000";
            chart.addChartScrollbar(chartScrollbar);

            // GRAPHS
            var graph = new AmCharts.AmGraph();
            graph.bullet = "round";
            graph.title = "x-Axis";
            graph.xField = "date";
            graph.valueField = "xaxis";
            graph.hideBulletsCount = 50;
            graph.balloonText = "[[value]] uT";
            graph.lineColor = "#b5030d";
            chart.addGraph(graph);

            var graph2 = new AmCharts.AmGraph();
            graph2.bullet = "square";
            graph2.title = "y-Axis";
            graph2.xField = "date";
            graph2.valueField = "xaxis";
            graph2.hideBulletsCount = 50;
            graph2.balloonText = "[[value]] uT";
            graph2.lineColor = "#0352b5";
            chart.addGraph(graph2);

            var graph3 = new AmCharts.AmGraph();
            graph3.bullet = "diamond";
            graph3.title = "z-Axis";
            graph3.xField = "date";
            graph3.valueField = "zaxis";
            graph3.hideBulletsCount = 50;
            graph3.balloonText = "[[value]] uT";
            graph3.lineColor = "#12B500";
            chart.addGraph(graph3);

            // value Axes
            valueAxis = new AmCharts.ValueAxis();
            valueAxis.title = "Magnetic Field"
            valueAxis.unit = "uT";
            chart.addValueAxis(valueAxis);

            // Legend
            var legend = new AmCharts.AmLegend();
            legend.useGraphSettings = true;
            legend.align = "center";
            legend.valueText = "[[open]]";
            chart.addLegend(legend);

            chart.titles = [{"id": "Title-1", "size": 15, "text": "Magnetic Sensor"}];

            chart.write("chartdiv");

        })


        function handleMove(event){
            var xValue = AmCharts.roundTo(valueAxis.coordinateToValue(event.x - valueAxis.axisX), 2);
            //var yValue = AmCharts.formatDate(valueAxis.axisX, "DD/MM/YYYY");
            var yValue = event.x - valueAxis.axisX;
            console.log("handleMove");
            document.getElementById('values').innerHTML = "x:" + xValue + " "+ yValue;

        }

        function loadCSV(file) {
            if (window.XMLHttpRequest) {
                // IE7+, Firefox, Chrome, Opera, Safari
                var request = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                var request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            // load
            request.open('GET', file, false);
            request.send();
            parseCSV(request.responseText);
        }
        function parseCSV(data) {
            //replace UNIX new lines
            data = data.replace (/\r\n/g, "\n");
            //replace MAC new lines
            data = data.replace (/\r/g, "\n");
            //split into rows
            var rows = data.split("\n");
            // loop through all rows
            for (var i = 0; i < rows.length; i++) {
                // this line helps to skip empty rows
                if (rows[i]) {
                    // our columns are separated by comma
                    var column = rows[i].split(",");

                    // column is array now 
                    // first item is date
                    date = timeConverter(column[0]);
                    // second item is value of the second column
                    var value = column[1].substring(2, column[1].length);
                    var value2 = column[2].substring(2, column[2].length);
                    var value3 = column[3].substring(2, column[3].length);

                    // create object which contains all these items:
                    var dataObject = {
                        date: date,
                        xaxis: value,
                        yaxis: value2,
                        zaxis: value3,
                        Balloon: "Time: "+ date.substring(11,23)
                    };
                    // add object to chartData array
                    chartData.push(dataObject);

                }
            }

            return chartData
        }
        function setPanSelect() {
            if (document.getElementById("rb1").checked) {
                chartCursor.pan = false;
                chartCursor.zoomable = true;

            } else {
                chartCursor.pan = true;
            }
            chart.validateNow();
        }
        function timeConverter(UNIX_timestamp){
            var test = UNIX_timestamp;
            var a = new Date(test.substring(0,10)*1000);
            var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
             var year = a.getFullYear();
             var month = (a.getMonth() + 1) < 10 ? '0' + (a.getMonth() + 1) : (a.getMonth() + 1) ;
             var date = a.getDate();
             var hour = a.getHours();
             var min = a.getMinutes() < 10 ? '0' + a.getMinutes() : a.getMinutes();
             var sec = a.getSeconds() < 10 ? '0' + a.getSeconds() : a.getSeconds();
             var msec = test.substring(10,13);
             var time = date + "-" + month + "-" + year + " " + hour + ":" + min + ":" + sec + "." + msec;
             return time;
         }

    </script>
</head>

<body>
<div align="center" id="chartdiv" style="margin:auto; width: 80%; height: 500px; background-color: #FFFFFF;" ></div>
<br>
<br>
<div id="values"></div>
</body>
</html>

xValue 应该是鼠标悬停时的实际日期。但它从 1500 到 -7188。如何获取日期或时间戳？以下是输入数据的示例:

1408706279704，x:7.13958740234375，y:-64.31884765625，z:-15.41900634765625
1408706279738,x:7.1990966796875,y:-64.5599365234375,z:-14.51873779296875
1408706279741,x:7.07855224609375,y:-65.27862548828125,z:-13.2598876953125
1408706279760,x:6.95953369140625,y:-65.09857177734375,z:-13.49945068359375
1408706279780,x:6.95953369140625,y:-65.45867919921875,z:-12.4786376953125
1408706279800,x:6.5399169921875,y:-65.45867919921875,z:-12.1795654296875
1408706279821,x:5.7586669921875,y:-65.51971435546875,z:-12.5396728515625
1408706279841,x:6.05926513671875,y:-65.399169921875,z:-13.2598876953125
1408706279861,x:5.7586669921875,y:-65.75927734375,z:-13.13934326171875
1408706279881,x:5.51910400390625,y:-65.9393310546875,z:-12.77923583984375
1408706279902,x:4.91943359375,y:-66.23992919921875,z:-12.41912841796875
1408706279921,x:4.7393798828125,y:-66.53900146484375,z:-11.8194580078125
1408706279941,x:3.95965576171875,y:-66.9586181640625,z:-11.15875244140625
1408706279963,x:3.47900390625,y:-67.19970703125,z:-10.25848388671875
1408706279984,x:3.47900390625,y:-67.3797607421875,z:-9.478759765625
1408706280006,x:3.179931640625,y:-67.7398681640625,z:-8.5784912109375
1408706280024,x:2.9998779296875,y:-67.7398681640625,z:-7.7392578125

最佳答案 

$("#chartdiv").mousemove(function () {
    var categoryIndex = chart.categoryAxis.xToIndex(event.x));
});

请在此处查看详细信息:https://hgminerva.wordpress.com/2014/12/28/how-to-get-the-x-axis-value-of-your-amchart-using-jquery-mousemove-event/

关于javascript - amcharts 获取鼠标的实际 xValue(日期)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26033597/

28 4 0
文章推荐： javascript - 如何按关联数组值排序(复杂数组结构)？
文章推荐： rust - M1 Mac 在编译 rust 代码时遇到错误
文章推荐： Rust Amethyst Pong 教程示例给出 "error: no example target named ` pong_tutorial_0 1`"
文章推荐： javascript - BlueImp 文件上传插件无法正常工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com