0

我正在研究动态加载的速度计。除了我在 Ajax 调用和速度计方面遇到的麻烦之外，我还很难将“指针”保持在 (0-20) 范围内。当指针以错误的方向旋转超过 0 或 20 时，整数输出显示小于或大于 20 的数字。我想将它保留在 0 的右侧和 20 的左侧。我的代码：

<!DOCTYPE HTML>
<html>
        <head>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
                <title>Tribble Inc Sales Meter</title>

                <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
                <script type="text/javascript">
$(function () {

    var chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container',
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: 'Sales-O-Meter'
            },

            pane: {
                startAngle: -150,
                endAngle: 150,
                background: [{
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#FFF'],
                            [1, '#333']
                        ]
                    },
                    borderWidth: 0,
                    outerRadius: '109%'
                }, {
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#333'],
                            [1, '#FFF']
                        ]
                    },
                    borderWidth: 1,
                    outerRadius: '107%'
                }, {
                    // default background
                }, {
                    backgroundColor: '#DDD',
                    borderWidth: 0,
                    outerRadius: '105%',
                    innerRadius: '103%'
                }]
            },

            // the value axis
            yAxis: {
                min: 0,
                max: 20,

                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: 'inside',
                minorTickColor: '#666',

                tickPixelInterval: 20,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 1,
                tickColor: '#666',
                labels: {
                    step: 2,
                    rotation: 'auto'
                },
                title: {
                    text: 'sales/min'
                },
                plotBands: [{
                    from: 0,
                    to: 4,
                    color: '#DF5353' // green
                }, {
                    from: 4,
                    to: 8,
                    color: '#DDDF0D' // yellow
                }, {
                    from: 8,
                    to: 20,
                    color: '#55BF3B' // red
                }]
            },

            series: [{
                name: 'Speed',
                data: [18],
                tooltip: {
                    valueSuffix: ' km/h'
                }
            }]

        },
        // Add some life
        function (chart) {
            setInterval(function () {
                var point = chart.series[0].points[0],
                    newVal,
                    inc = Math.floor((Math.random() - 1) * 20);

                newVal = point.y + inc;
                if (newVal < 0 || newVal > 20) {
                    newVal = point.y - inc;
                }

                point.update(newVal);

            }, 3000);
        });
});
                </script>
        </head>
        <body>
<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
<!--<script src="exporting.js"></script>-->

<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>

        </body>
</html>

我不完全确定我做错了什么......也许 Math.floor() 函数已关闭，但我不这么认为。有人可以帮忙吗？

4

1 回答 1

1 
                    inc = Math.floor((Math.random() - 1) * 20);

            newVal = point.y + inc;
            if (newVal < 0 || newVal > 20) {
                newVal = point.y - inc;

此代码生成一个负 inc，将其添加到 point，使 point 为负，然后将其减去到 point，使 point 更正。它出错了，因为 inc 可以大于点。

您需要的算法取决于您希望图表如何变化。如果您希望针摆动，则生成一个较小的 inc，将其添加到点，然后对其进行边界检查。

                    inc = (Math.random() * 2.0)-1.0;

            newVal = point.y + inc;
            if (newVal < 0 || newVal > 20) {
                newVal = point.y - inc;
于 2013-03-16T07:35:42.807 回答