Question

我正在研究动态加载的速度计。除了我的阿贾克斯调用与速度表一起使用的麻烦之外，我无法将“针”保持在范围内（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（）函数已关闭，但我不这么认为。有人可以帮忙吗？

Answer 1

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

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

此代码生成一个负面公司，将其添加到点，使点为负，然后将其减去指向，使点更积极。这是错误的，因为inc可能大于点。

您需要的算法取决于您希望图表的变化方式。如果你想要针摆动，那么生成一个较小的inc，将它添加到点然后边界检查它。

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

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

如何将highcharts车速表保持在范围内

1 个答案: