Question

我想创建一个高级程序，我需要在其中包含各种highcharts.one下拉列表中会列出选项。这些选项应该是不同的不同highcharts.eg.gauge highvhart，pie highchart的名称，栏，列，迷你图，线条高图。单个div标签应该在同一页面上。如果我从下拉列表中选择仪表高图选项，则应在页面上显示仪表高图。

我知道如何单独创建这些高级图表，但我不知道我们应该只使用一个div标签来根据下拉框中所选选项呈现所有高级图表的问题。

我没有提供我的代码，因为我对此一无所知。所以，请提前告诉我一些想法。谢谢。

这里是我的完整代码。在这个代码中，数据以表格格式显示，但我想以下拉列表方式显示这个，我之前已经解释过，我只想要一个div标签来渲染所有的高级图表关于选择。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
         <style type="text/css">

table{
    border-collapse:collapse;
    font-family:helvetica, arial, sans-serif;
}
th{
    font-weight:bold;
    text-align:center;
    padding:5px;
}
thead th{
    border-bottom:1px solid #999;
}
td{
    padding:5px;
    vertical-align:middle;
}


         </style>

        <script type="text/javascript" src="../../js/jquery-1.6.4.min.js"></script>
        <script type="text/javascript">
$(function () {
    var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'area',
        margin:[0,0,0,0],
        //borderWidth:1
    },
    title:{
        text:''
    },
    credits:{
        enabled:false
    },
    xAxis: {
        labels: {
            enabled:false
        }
    },
    yAxis: {
        maxPadding:0,
        minPadding:0,
        endOnTick:false,
        labels: {
            enabled:false
        }
    },
    legend: {
        enabled:false
    },
    tooltip: {
        enabled:false
    },
    plotOptions: {
        series:{
            lineWidth:1,
            shadow:false,
            states:{
                hover:{
                    lineWidth:9
                }
            },
            marker:{
                //enabled:false,
                radius:1,
                states:{
                    hover:{
                        radius:2
                    }
                }
            }
        }
    },
    series: [{
        color:'#666',
        fillColor:'rgba(204,204,204,.25)',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }]
});
});

$(function () {
    var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container1',
        defaultSeriesType: 'pie',
        margin:[0,0,0,0],
        //borderWidth:1
    },
    title:{
        text:''
    },
    credits:{
        enabled:false
    },
    xAxis: {
        labels: {
            enabled:false
        }
    },
    yAxis: {
        maxPadding:0,
        minPadding:0,
        endOnTick:false,
        labels: {
            enabled:false
        }
    },
    legend: {
        enabled:false
    },
    tooltip: {
        enabled:false
    },
    plotOptions: {
        series:{
            lineWidth:1,
            shadow:false,
            states:{
                hover:{
                    lineWidth:9
                }
            },
            marker:{
                //enabled:false,
                radius:1,
                states:{
                    hover:{
                        radius:2
                    }
                }
            }
        }
    },
    series: [{
        color:'#666',
        fillColor:'rgba(204,204,204,.25)',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }]
});
});


$(function () {
    var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container2',
        defaultSeriesType: 'bar',
        margin:[0,0,0,0],
        //borderWidth:1
    },
    title:{
        text:''
    },
    credits:{
        enabled:false
    },
    xAxis: {
        labels: {
            enabled:false
        }
    },
    yAxis: {
        maxPadding:0,
        minPadding:0,
        endOnTick:false,
        labels: {
            enabled:false
        }
    },
    legend: {
        enabled:false
    },
    tooltip: {
        enabled:false
    },
    plotOptions: {
        series:{
            lineWidth:1,
            shadow:false,
            states:{
                hover:{
                    lineWidth:9
                }
            },
            marker:{
                //enabled:false,
                radius:1,
                states:{
                    hover:{
                        radius:2
                    }
                }
            }
        }
    },
    series: [{
        color:'#666',
        fillColor:'rgba(204,204,204,.25)',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }]
});
});
        </script>
    </head>
    <body>
    <script src="../../js/highcharts.js"></script>
<table>
    <caption>Sparkline</caption>
    <thead>
        <tr>
            <th>Category</th>
            <th>Value</th>    
            <th>Trend</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Category 1</th>
            <td>54.4</td>
            <td><div id="container" style="height:60px;width:200px;"></div></td>
        </tr>
        <tr>
            <th scope="row">Category 2</th>
            <td>60.4</td>
            <td><div id="container1" style="height:60px;width:200px;"></div></td>
        </tr>
        <tr>
            <th scope="row">Category 3</th>
            <td>60.4</td>
            <td><div id="container2" style="height:80px;width:300px;"></div></td>
        </tr>
    </tbody>
</table>


    </body>
</html>

Answer 1

让我知道这是否有用

http://jsfiddle.net/4b0uyd2d/1/

var value = 3; // Here you have to set value that you get from database
    var $select = $('.js-select'); // Specify your select here

    var updateBoxes = function( value ) {
        $('.js-box').hide();
        $('#container' + value).show();
    }

    var initSelects = function( value ) {
        if (value !== 0) {
            $select.val( value );
        }
        $select.on('change', function() {
            updateBoxes( $select.val() );
        });
    }

    initSelects( value );
    updateBoxes( value );

在现有的高级功能下添加此代码。

如何使用javascript将多个highcharts呈现为一个div标签

1 个答案: