Question

我正在与Highcharts合作开展一个项目。一切都运行良好，然后，无缘无故（我没有改变任何东西），它不再工作（部分）。我认为问题出在我如何加载我的js，但我找不到如何加载它们。

我有2个模块，显示了车辆的速度和转速。 In this picture，我们可以看到只有rpm的一个正在加载。之前，其中两个正在加载。而且，我正在使用Ajax让它在现场上下运行，它正在工作，但现在它不再起作用了。

这是控制台中的错误：“未捕获的TypeError：c.color.tweenTo不是函数”。

首先，这是我的Highcharts脚本：

    $(function () {

        $(window).on('load resize', function(){
            var div = $('#container-speed');
            //div.height(div.width() * 0.75);
            div = $('#container-rpm');
            //div.height(div.width() * 0.75);        
        });

        var gaugeOptions = {

            chart: {
                type: 'solidgauge'
            },

            title: null,

            pane: {
                center: ['50%', '50%'],
                size: '100%',
                startAngle: -90,
                endAngle: 90,
                background: {
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },

            tooltip: {
                enabled: false
            },

            yAxis: {
                stops: [
                    [0.1, '#55BF3B'], // green
                    [0.4, '#DDDF0D'], // yellow
                    [0.7, '#DF5353'] // red
                ],
                lineWidth:0,
                minorTickInterval: null,
                tickAmount: 2,
                title: {
                    y: -70
                },
                labels: {
                    y: 16
                }
            },

            plotOptions: {
                solidgauge: {
                    dataLabels: {
                        y: 5,
                        borderWidth: 0,
                        useHTML: true
                    }
                }
            }
        };

        var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
            yAxis: {
                min: 0,
                max: 200,
                title: {
                    text: 'Speed'
                }
            },

            credits: {
                enabled: false
            },

            series: [{
                name: 'Speed',
                data: [0],
                dataLabels: {
                    format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                           '<span style="font-size:12px;color:silver">km/h</span></div>'
                },
                tooltip: {
                    valueSuffix: ' km/h'
                }
            }]
        }));

        var chartRpm = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions, { //{y:.1f}
            yAxis: {
                min: 0,
                max: 7000,
                title: {
                    text: 'RPM'
                }
            },

            series: [{
                name: 'RPM',
                data: [0],
                dataLabels: {
                    format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.f}</span><br/>' +
                           '<span style="font-size:12px;color:silver">tour / min</span></div>'
                },
                tooltip: {
                    valueSuffix: ' revolutions/min'
                }
            }]
        }));

        setInterval(function () {
            var vitesse = document.getElementById('myValues').value;

            var point,
                newVal,
                inc;
            if (chartSpeed) {
                point = chartSpeed.series[0].points[0];
                inc = Math.round((Math.random() - 0.5) * 100);
                newVal = point.y + inc;
                var vitessee =Math.round(vitesse);
                point.update(vitessee);
            }

            var rpm = document.getElementById('rpm').value;
            if (chartRpm) {
                point = chartRpm.series[0].points[0];
                inc = Math.round((Math.random() - 0.5) * 100);
                newVal = point.y + inc;

            var rpmm =Math.round(rpm);

                point.update(rpmm);
                }
            }, 2000);  
        });

这是我的ajax：

    function auto_load(){

        $.ajax({
            url: "traite.php",
            cache: false,
            success: function(data){
                data = JSON.parse(data);

                $("#myValues").val(parseInt(data[0].vitesse));
                $("#rapport").html('<label style="font-size: 20px">Rapport de vitesse : <br /><span style="font-size: 30px;">' + data[0].rapport + '</span></label>');

                if (data[0].tour_minute > 2000)
                    $("#conseil").html('<h3>Il serait temps de passer la vitesse</h3>');
                else
                    $("#conseil").html('');


                $("#rpm").val(data[0].tour_minute);
                $("#conso").html('<label style="font-size: 30px">Consommation : <br /><span style="font-size: 50px;">' + data[0].consomation + '</span> L/100km </label>');

                var poll =  parseInt(data[0].consomation * 0.7 * 3.67 * 10);
                $("#pollution").html('<label style="font-size: 30px">Rejet de CO2 : <br /><span style="font-size: 50px;">' + poll + '</span> gCO2/km </label>');

                $(".round").html();
            } 
        });
    }

以下是我加载js的方法：

<script src="js/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="test2.js"></script>

<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

脚本test2.js是初始化我想要的图表

我已经搜索并尝试重新排列js，但它没有解决问题。我尝试将solid-jauge.js放在highcharts-more.js之前，但是我在控制台中遇到了另一个错误：“Uncaught TypeError：c.init不是函数”。

我已经搜索了一周试图解决问题，但我似乎无法找到错误。

提前感谢任何利用时间帮助我的人！如果错误只是一个简单的拼写错误或类似的错误，我很抱歉，如果你已经搜索了所有这些代码没有。

Answer 1

我遇到了和你一样的问题，并且发现这是由于CDN托管的solid-guage.js最近更新并且与我正在使用的本地highcharts.js不兼容。要解决此问题，请从Highcharts（https://www.highcharts.com/download）中提取源代码，并在项目中本地包含lib。所以而不是：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

使用：

<script src="lib/highcharts.js"></script>
<script src="lib/highcharts-more.js"></script>
<script src="lib/solid-gauge.js"></script>

未捕获的TypeError：c.color.tweenTo不是函数

1 个答案: