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 を生成し、それをポイントに加算してポイントを負にし、それをポイントに減算してポイントをより正にします。inc は point よりも大きくなる可能性があるため、うまくいきません。

必要なアルゴリズムは、グラフをどのように変化させたいかによって異なります。針をぐらぐらさせたい場合は、より小さなインクを生成し、それをポイントに追加してから、境界をチェックします。

                    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 に答える