同一页面中的多个Highchart主题

时间:2015-03-04 19:37:05

标签: javascript jquery highcharts

您好我想在页面中设置多个高图表主题 我有4张图表。我想要 图表1:默认主题

图表2:沙子主题

图表3:黑色主题

图表4:grid_light

我已经从this问题尝试过了  但我的图表主题不会改变。

  • 代码sand.js http://pastebin.com/66WeFqTs
  • 代码black.js http://pastebin.com/4yNDamgJ
  • 代码grid_light.js http://pastebin.com/TgpJutZ8

                            

    <script>
    //Chart 1
    $(function () {
        $('#chart1').highcharts({
            title: {
                text: 'Total Kunjungan Per Bulan',
                x: -20 //center
            },
            xAxis: {
                categories: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember']
            },
            yAxis: {
                title: {
                    text: 'Total Kunjungan Per Bulan'
                },
                tickInterval: 1,
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },       tooltip:{
                    formatter:function(){
                        console.log(this);
                        return   this.key + ' : ' + this.y + ' Kunjungan';
                    }
                },
    
            series: [{
                name: '<?php echo $hasil->nama_sekolah?>',
                data: [
                <?php
                $years = date("Y");
                $data_ds = mysql_query("SELECT count(*) as hitung FROM `sekolah_kunjungan` where  kode='$hasil->kode' and tahun_kunjungan='$years' group by bulan_kunjungan");
                while ($ds=mysql_fetch_object($data_ds)) {
                echo "".$ds->hitung.",";
                }
                ?>
                ]
            }]
        });
    });
    </script>
    
    <script>
    //Chart 2
    $(function () {
        $('#chart2').highcharts({
    
            chart: {
                type: 'column'
            },
            title: {
                text: 'Jumlah Pengunjung Per Tahun'
            },
            yAxis: {
                min: 0,
                labels: {
                    format: '{value:.y:,.0f}'
                },
                title: {
                    text: 'Kunjungan / Tahun'
                },
                tickInterval: 1
            },
            tooltip: {
                headerFormat: '<table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} Kunjungan/Tahun</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true,
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [
            <?php 
            $data_th = mysql_query("SELECT count( id_kunjungan ) AS hitung, tahun_kunjungan FROM sekolah_kunjungan where  kode='$hasil->kode' group by tahun_kunjungan");
                while ($th=mysql_fetch_object($data_th)) {
            ?>{
                name: '<?php echo $th->tahun_kunjungan ?>',
                data: [<?php echo $th->hitung ?>]
    
            }, 
            <?php }?>
            ]
        });
    });
    
    </script>
    
    
    
    <script>
    //Chart 3
    $(function () {
        $('#chart3').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Jumlah Pendaftar Berdasarkan Jenis Kelamin'
            },
    
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.y}',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Total',
                data: [
                <?php 
                $data_jk = mysql_query("SELECT count(id_daftar) as hitung,jenis FROM sekolah_daftar where  kode='$hasil->kode' group by jenis");
                    while ($jk=mysql_fetch_object($data_jk)) {
                ?>
                    ['<?php echo $jk->jenis?>', <?php echo $jk->hitung ?>],
                <?php } ?>
    
                ]
            }]
        });
    });
    
    </script>
    
    
    <script>
    //Chart 4
    $(function () {
        $('#chart4').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Jumlah Pendaftar Pertahun Ajaran'
            },
            yAxis: {
                min: 0,
                labels: {
                    format: '{value:.y:,.0f}'
                },
                title: {
                    text: 'Pendaftar / Tahun'
                },
                tickInterval: 1
            },
            tooltip: {
                headerFormat: '<table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} Pendaftar/Tahun</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true,
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [
            <?php 
            $data_th = mysql_query("SELECT count( id_daftar ) AS hitung, tahun_kunjungan FROM sekolah_daftar where  kode='$hasil->kode' group by tahun_kunjungan");
                while ($th=mysql_fetch_object($data_th)) {
            ?>{
                name: '<?php echo $th->tahun_kunjungan ?>',
                data: [<?php echo $th->hitung ?>]
    
            }, 
            <?php }?>
            ]
        });
    });
    </script>
    

谢谢:)

0 个答案:

没有答案