Question

我一直在寻找并努力为我的问题寻找解决方案很长一段时间但没有运气。

我有一个简单的屏幕，我要求用户输入他们的分数。一旦他们输入他们的分数，我的图表就显示出我预先定义的平均分数和最高分数。在这种情况下，我的平均分为1450，最高分为1900。

我想要做的是，一旦我的页面加载，我希望我的图表显示平均和最高分。一旦用户输入他的分数，它就会显示出来。

以下是我的代码，您可以在此处查看：http://jsfiddle.net/8jomr1wd/

有什么想法吗？

        $(function () {
        $('#btn').click(function () {
            var val1,
            options;
            val1 = parseFloat($('input[name=entered]').val());
            if ((val1 >= 0) && (val1 <= 1900)) {
                // start creating the chart
                options = {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Title'
                    },
                    subtitle: {
                        text: 'This is subtitle'
                    },
                    xAxis: {
                        type: 'category',
                        labels: {
                            enabled: true
                        },
                        legend: {
                            enabled: true
                        },
                        categories: ['Your score', 'Average', 'Highest Score']
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderColor: '#000000',
                            borderWidth: 1,
                            dataLabels: {
                                enabled: true
                            },
                            colorByPoint: true
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    yAxis: {
                        max: 1900,
                        tickInterval: 100,
                        title: 'test'
                    },
                    tooltip: {
                        enabled: true
                    },
                    series: [{
                        name: 'Score',
                        data: [val1, 1450, 1900]
                    }],
                };
            } else {
                $("#result").append("<div>Score must be between 0-1900</div>");
            }
            $('#container').highcharts(options);
        })
    });

Answer 1

$(document).ready(function () {
$(function () {
    create(0)
    $('#btn').click(function () {
        var val1,
        options;
        val1 = parseFloat($('input[name=entered]').val());
        create(val1);
    });
});
});
function create(val1){
        if ((val1 >= 0) && (val1 <= 1900)) {
            // start creating the chart
            options = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Title'
                },
                subtitle: {
                    text: 'This is subtitle'
                },
                xAxis: {
                    type: 'category',
                    labels: {
                        enabled: true
                    },
                    legend: {
                        enabled: true
                    },
                    categories: ['Your score', 'Average', 'Highest Score']
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderColor: '#000000',
                        borderWidth: 1,
                        dataLabels: {
                            enabled: true
                        },
                        colorByPoint: true
                    }
                },
                credits: {
                    enabled: false
                },
                yAxis: {
                    max: 1900,
                    tickInterval: 100,
                    title: 'test'
                },
                tooltip: {
                    enabled: true
                },
                series: [{
                    name: 'Score',
                    data: [val1, 1450, 1900]
                }]
            };
        } else {
            $("#result").append("<div>Score must be between 0-1900</div>");
        }
        $('#container').highcharts(options);
}

如何配置Highcharts以便它显示一些预定义的值

1 个答案: