Question

我有一个奇怪的问题：当我尝试为highcharts创建一个刷新内容的函数时，它适用于jsfiddle，但不适用于我自己的网站。

有人可以告诉我区别吗？或许解决方案？

我的测试：

<!DOCTYPE html>
<html lang="nl">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">
$(function () {
        $('#chart1').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Project: Dikke fiets'
            },
            subtitle: {
                text: 'Begrote bedragen versus gebruikte bedragen'
            },
            xAxis: {
                categories: [
                    'Materiaal',
                    'Personeel',
                    'Onderhoud',
                    'dik'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Bedrag in euro\'s'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>&euro; {point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Begroot',
                data: [49.90, 71.50, 106.40, 129.20]

            }, {
                name: 'Gebruikt',
                data: [83.60, 78.80, 98.50, 93.40]

            }]
        });
    });

// nieuw gedeelte

var options = {
    chart: {
        renderTo: 'chart1',
        defaultSeriesType: 'spline'
    },
    series: []
};

$("#change").click(function(){
if ($("#list").val() == "A")
{
    options.series = [{
                name: 'Dik',
                data: [49.90, 71.50, 106.40, 129.20]

            }, {
                name: 'Dun',
                data: [83.60, 78.80, 98.50, 93.40]

            }]
    //$.get('/dough/includes/live-chart.php?mode=month'
}
else
{
    options.series = [{name: 'B', data: [3,2,1,2,3]}]
    //$.get('/dough/includes/live-chart.php?mode=newmode'
} 
var chart = new Highcharts.Chart(options);    
});

        </script>


      <div id="chart1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

          </div>
          <SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set B
</SELECT>
<button id="change">Refresh Table</button>

    <script src="./js/highcharts/highcharts.js"></script>
    <script src="./js/highcharts/modules/exporting.js"></script>

在jsfiddle我试过这个：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set B
</SELECT>
<button id="change">Refresh Table</button>

<div id="chart1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

的javascript：

$(function () {
        $('#chart1').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Project: Dikke fiets'
            },
            subtitle: {
                text: 'Begrote bedragen versus gebruikte bedragen'
            },
            xAxis: {
                categories: [
                    'Materiaal',
                    'Personeel',
                    'Onderhoud',
                    'dik'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Bedrag in euro\'s'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>&euro; {point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Begroot',
                data: [49.90, 71.50, 106.40, 129.20]

            }, {
                name: 'Gebruikt',
                data: [83.60, 78.80, 98.50, 93.40]

            }]
        });
    });

// nieuw gedeelte

var options = {
    chart: {
        renderTo: 'chart1',
        defaultSeriesType: 'spline'
    },
    series: []
};

$("#change").click(function(){
if ($("#list").val() == "A")
{
    options.series = [{
                name: 'Dik',
                data: [49.90, 71.50, 106.40, 129.20]

            }, {
                name: 'Dun',
                data: [83.60, 78.80, 98.50, 93.40]

            }]
    //$.get('/dough/includes/live-chart.php?mode=month'
}
else
{
    options.series = [{name: 'B', data: [3,2,1,2,3]}]
    //$.get('/dough/includes/live-chart.php?mode=newmode'
} 
var chart = new Highcharts.Chart(options);    
});



        // nieuw gedeelte
        var options = {
            chart: {
                renderTo: 'chart1',
                defaultSeriesType: 'spline',
                type: 'column'
            },
            series: []
        };

        $("#change").click(function () {
            if ($("#list").val() == "A") {
                options.series = [{
                    name: 'Begroot',
                    data: [49.90, 61.50, 106.40, 129.20]

                }, {
                    name: 'Gebruikt',
                    data: [83.60, 78.80, 98.50, 93.40]

                }]
            } else {
                options.series = [{
                    name: 'Begroot',
                    data: [19.90, 61.50, 26.40, 29.20]

                }, {
                    name: 'Gebruikt',
                    data: [13.60, 28.80, 38.50, 53.40]

                }]
            }
            var chart = new Highcharts.Chart(options);
        });

在jsfiddle，这是有效的。 link

Answer 1

您的代码出现问题的原因是您在function按钮上绑定了#change，该按钮稍后在代码中加载，因此无法在按钮上附加侦听器。

我已经审核了您的代码并为您提供了两种解决方案

首先只需将您的函数脚本放在文件末尾即可进行排序。

...//your code snippet of end only
        <script src="./js/highcharts/highcharts.js">
        <script src="./js/highcharts/modules/exporting.js">
        <script>
            $(function () {
                $('#chart1').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Project: Dikke fiets'
                    },
                    subtitle: {
                        text: 'Begrote bedragen versus gebruikte bedragen'
                    },
                    xAxis: {
                        categories: [
                            'Materiaal',
                            'Personeel',
                            'Onderhoud',
                            'dik'
                        ]
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Bedrag in euro\'s'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>&euro; {point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [{
                        name: 'Begroot',
                        data: [49.90, 71.50, 106.40, 129.20]

                    }, {
                        name: 'Gebruikt',
                        data: [83.60, 78.80, 98.50, 93.40]

                    }]
                });
            });

            // nieuw gedeelte

            var options = {
                chart: {
                    renderTo: 'chart1',
                    defaultSeriesType: 'spline'
                },
                series: []
            };

            $("#change").click(function(){
                if ($("#list").val() == "A")
                {
                    options.series = [{
                            name: 'Dik',
                            data: [49.90, 71.50, 106.40, 129.20]

                        }, {
                            name: 'Dun',
                            data: [83.60, 78.80, 98.50, 93.40]

                        }]
                //$.get('/dough/includes/live-chart.php?mode=month'
                }
                else
                {
                    options.series = [{name: 'B', data: [3,2,1,2,3]}]
                    //$.get('/dough/includes/live-chart.php?mode=newmode'
                } 
                var chart = new Highcharts.Chart(options);    
            });

            // nieuw gedeelte
            var options = {
                chart: {
                    renderTo: 'chart1',
                    defaultSeriesType: 'spline',
                    type: 'column'
                },
                series: []
            };

            $("#change").click(function () {
                if ($("#list").val() == "A") {
                    options.series = [{
                        name: 'Begroot',
                        data: [49.90, 61.50, 106.40, 129.20]

                    }, {
                        name: 'Gebruikt',
                        data: [83.60, 78.80, 98.50, 93.40]

                    }]
                } else {
                    options.series = [{
                        name: 'Begroot',
                        data: [19.90, 61.50, 26.40, 29.20]

                    }, {
                        name: 'Gebruikt',
                        data: [13.60, 28.80, 38.50, 53.40]

                    }]
                }
                var chart = new Highcharts.Chart(options);
            });
        </script>
    </body>
</html>

第二次您可以做的事情，只需将您的功能包含在文档准备就绪中，如下所示：

$(document).ready(function(){
    $("#change").click(function () {
        if ($("#list").val() == "A") {
            options.series = [{
                name: 'Begroot',
                data: [49.90, 61.50, 106.40, 129.20]

            }, {
                name: 'Gebruikt',
                data: [83.60, 78.80, 98.50, 93.40]

            }]
        } else {
            options.series = [{
                name: 'Begroot',
                data: [19.90, 61.50, 26.40, 29.20]

            }, {
                name: 'Gebruikt',
                data: [13.60, 28.80, 38.50, 53.40]

            }]
        }
        var chart = new Highcharts.Chart(options);
    });
});

我希望这能解决你的问题。

快乐编码!!!

高清刷新不会在我的网站上工作

1 个答案: