обновление Highchart не будет работать на моем сайте

Question

обновление Highchart не будет работать на моем сайте

0

У меня странная проблема: когда я пытался сделать функцию для 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 это работает. ссылка

Mart-Jan 20 март 2014, в 10:16

Источник

0

какую именно ошибку вы получаете?
TheMohanAhuja 20 март 2014, в 08:40
0

Я не получаю никакой ошибки. но функция не заменяет что-либо на моем сайте. на jsfiddle это делает ...
Mart-Jan 20 март 2014, в 08:55
0

когда я попробовал тот же код здесь, на моем сайте, он работает нормально, я думаю, что проблема может быть связана с версией jquery, если вы можете поделиться ссылкой на страницу сайта, где у вас возникают проблемы, я смогу вам помочь.
TheMohanAhuja 20 март 2014, в 09:00
0

Это в моем посте. «Мой тестовый файл»
Mart-Jan 20 март 2014, в 09:09
0

Извините, я не смог этого понять, смотрите, я добавил ответ на вашу проблему.
TheMohanAhuja 20 март 2014, в 09:18

Показать ещё 3 комментария

Теги:

javascript

jquery

highcharts

1 ответ

Ещё вопросы

какую именно ошибку вы получаете?
Я не получаю никакой ошибки. но функция не заменяет что-либо на моем сайте. на jsfiddle это делает ...
когда я попробовал тот же код здесь, на моем сайте, он работает нормально, я думаю, что проблема может быть связана с версией jquery, если вы можете поделиться ссылкой на страницу сайта, где у вас возникают проблемы, я смогу вам помочь.
Это в моем посте. «Мой тестовый файл»
Извините, я не смог этого понять, смотрите, я добавил ответ на вашу проблему.

TheMohanAhuja · Accepted Answer · 2014-03-20T06-53-00.000Z

Проблема с вашим кодом заключалась в том, что вы привязывали 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);
    });
});

Надеюсь, это решит вашу проблему.

Счастливое кодирование !!!

Таким образом, я должен был вызвать 2 сценария highcharts в моем теле прямо перед сценарием данных?
хотя в вашем коде есть одна проблема, вы подключаете два прослушивателя щелчка через «#change», который перегружен
Я изменил это сейчас. И это работает. Спасибо!
всегда добро пожаловать @ Март-Ян