Javascript highchart刷新在我的网站上不起作用_Javascript_Jquery_Highcharts

Javascript highchart刷新在我的网站上不起作用

javascript jquery highcharts

Javascript highchart刷新在我的网站上不起作用,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,我有一个奇怪的问题：当我尝试为highcharts创建一个刷新内容的函数时，它在JSFIDLE上工作，但在我自己的网站上不工作有人能告诉我区别吗？或者是解决方案我的测试： <!DOCTYPE html> <html lang="nl"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">&l

我有一个奇怪的问题：当我尝试为highcharts创建一个刷新内容的函数时，它在JSFIDLE上工作，但在我自己的网站上不工作

有人能告诉我区别吗？或者是解决方案

我的测试：

<!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>


$（函数（）{
$（'图表1'）。高图({
图表：{
类型：“列”
},
标题：{
文字：“项目：Dikke fiets”
},
副标题:{
文字：“Begrote bedragen与gebruikte bedragen”
},
xAxis：{
类别：[
“材料”，
“个人”，
“Onderhoud”，
“迪克”
]
},
亚克斯：{
分:0,，
标题：{
文字：“欧元区的床单”
}
},
工具提示：{
headerFormat:“{point.key}”，
pointFormat:“{series.name}:”+
“&euro；{point.y:.1f}”，
页脚格式：“”，
分享：是的，
useHTML:true
},
打印选项：{
专栏：{
点填充：0.2，
边框宽度：0
}
},
系列：[{
名称：“Begroot”，
数据：[49.90,71.50,106.40,129.20]
}, {
名称：“Gebruikt”，
数据：[83.60,78.80,98.50,93.40]
}]
});
});
//nieuw gedeelte
变量选项={
图表：{
renderTo:'图表1'，
defaultSeriesType:“样条线”
},
系列：[]
};
$（“#更改”）。单击（函数（）{
如果（$（“#列表”）.val（）=“A”）
{
options.series=[{
姓名：'迪克'，
数据：[49.90,71.50,106.40,129.20]
}, {
姓名：‘邓’，
数据：[83.60,78.80,98.50,93.40]
}]
//$.get（'/ruam/includes/live chart.php？mode=month'
}
其他的
{
options.series=[{name:'B'，数据：[3,2,1,2,3]}]
//$.get（'/ruam/includes/live chart.php？mode=newmode'
} 
var图表=新的Highcharts.图表（选项）；
});
数据集A
数据集B
刷新表

在JSFIDLE上，我尝试了以下方法：

<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>


数据集A
数据集B
刷新表

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);
        });

$（函数（）{
$（'图表1'）。高图({
图表：{
类型：“列”
},
标题：{
文字：“项目：Dikke fiets”
},
副标题:{
文字：“Begrote bedragen与gebruikte bedragen”
},
xAxis：{
类别：[
“材料”，
“个人”，
“Onderhoud”，
“迪克”
]
},
亚克斯：{
分:0,，
标题：{
文字：“欧元区的床单”
}
},
工具提示：{
headerFormat:“{point.key}”，
pointFormat:“{series.name}:”+
“&euro；{point.y:.1f}”，
页脚格式：“”，
分享：是的，
useHTML:true
},
打印选项：{
专栏：{
点填充：0.2，
边框宽度：0
}
},
系列：[{
名称：“Begroot”，
数据：[49.90,71.50,106.40,129.20]
}, {
名称：“Gebruikt”，
数据：[83.60,78.80,98.50,93.40]
}]
});
});
//nieuw gedeelte
变量选项={
图表：{
renderTo:'图表1'，
defaultSeriesType:“样条线”
},
系列：[]
};
$（“#更改”）。单击（函数（）{
如果（$（“#列表”）.val（）=“A”）
{
options.series=[{
姓名：'迪克'，
数据：[49.90,71.50,106.40,129.20]
}, {
姓名：‘邓’，
数据：[83.60,78.80,98.50,93.40]
}]
//$.get（'/ruam/includes/live chart.php？mode=month'
}
其他的
{
options.series=[{name:'B'，数据：[3,2,1,2,3]}]
//$.get（'/ruam/includes/live chart.php？mode=newmode'
} 
var图表=新的Highcharts.图表（选项）；
});
//nieuw gedeelte
变量选项={
图表：{
renderTo:'图表1'，
defaultSeriesType:“样条线”，
类型：“列”
},
系列：[]
};
$（“#更改”）。单击（函数（）{
如果（$（“#列表”）.val（）=“A”）{
options.series=[{
名称：“Begroot”，
数据：[49.90,61.50,106.40,129.20]
}, {
名称：“Gebruikt”，
数据：[83.60,78.80,98.50,93.40]
}]
}否则{
options.series=[{
名称：“Begroot”，
数据：[19.90,61.50,26.40,29.20]
}, {
名称：“Gebruikt”，
数据：[13.60,28.80,38.50,53.40]
}]
}
var图表=新的Highcharts.图表（选项）；
});

在JSFIDLE上，这是可行的。

代码的问题是您在

上绑定了函数
#更改

按钮，该按钮稍后加载到代码中，因此导致未在按钮上附加侦听器

我已经检查了您的代码，并为您提供了两种解决方案

首先只需将函数脚本放在文件末尾，然后进行排序

...//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>

我希望这能解决你的问题

愉快的编码！！！

您到底遇到了什么错误？我没有收到任何错误。但是该函数并没有替换我网站上的任何内容。在JSFIDLE it d上

$(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);
    });
});