无法使用来自mysql数据库的数据在3D中显示Highcharts

时间:2015-10-30 15:04:36

标签: javascript mysql highcharts

要使此图表适用于3D选项,我需要做些什么?我把所有东西都正确连接起来,它在2D中显示图表就好了。

当我在下面的示例中添加options3d时,会抛出标识符已折旧的错误。

  <script type="text/javascript">
    $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                type: 'column',
                marginRight: 75,
                marginBottom: 25
                 //options3d: {
                   // enabled: true,
                    //alpha: 15,
                    //beta: 15,
                   // depth: 50,
                   // viewDistance: 25
                // }
            },
            title: {
                text: 'Contributions to Filers by Year',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Money Contributed to Filers'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y;
                }
            },
            legend: {
                layout: 'horizontal',
                align: 'left',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
             plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            series: []
        }

        $.getJSON("/charts/data/filers-test.php", function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series[0] = json[1];

            chart = new Highcharts.Chart(options);
        });
    });
    </script>

这是我尝试过的没有运气的东西,我注释掉了3D部分,因为这是我使用数据查询的唯一方式:

{{1}}

1 个答案:

答案 0 :(得分:0)

由于没有人能够帮助我,我通过反复试验自己解决了这个问题。这是我用来从服务器获得最终工作结果的脚本。这会产生一个很好的3D高清图,可以正确显示数据。在实际使用之前,我可能需要再编辑几次......

  $(document).ready(function() {
                        var options = {
                            // basic chart options
                            chart: {
                                height: 350,
                                renderTo: 'container',
                                type: 'column',
                                marginRight: 130,
                                lang: {
                                    thousandsSep: ','
                                },
                                marginBottom: 25,
                                // 3D initialization, comment out for non-3D columns
                                 options3d: {
                                                enabled: true,
                                                alpha: 0,
                                                beta: 2,
                                                depth: 50,
                                                viewDistance: 25
                                            }
                            },
                            // main chart title (TOP)
                            title: {
                                text: 'Contributions to Filers',
                                x: -20 //center
                            },
                            // main chart sub-title (TOP)
                            subtitle: {
                                text: '',
                                x: -20
                            },
                            // xAxis title
                            xAxis: {
                                reversed: true,
                                title: {
                                    text: 'Election Year'
                            },
                                categories: [],
                                reversed: true
                            },
                            // yAxis title
                            yAxis: {
                                title: {
                                    text: 'Dollar Amount'
                                },
                                // chart options for each plotted point
                                plotLines: [{
                                    value: 1,
                                    width: 1,
                                    color: '#66837B'
                                }]
                            },
                            // tooltip on hover options
                            tooltip: {
                                lang: {
                                    thousandsSep: ','
                                },
                                formatter: function() {
                                        return '<b>'+ this.series.name +'</b><br/>'+
                                        this.x +': '+ this.y;
                                }
                            },
                            legend: {
                                layout: 'horizontal',
                                align: 'left',
                                verticalAlign: 'top',
                                x: 0,
                                y: 0,
                                borderWidth: 0,
                            },
                             plotOptions: {
                                bar: {
                                dataLabels: {
                                    enabled: true,
                                    color: '#F2C45A'
                                    }
                                },
                                series: {
                                    text: 'Total Dollar Amount',
                                    color: '#66837B',
                                    cursor: 'pointer'
                                },
                                column: {
                                    stacking: 'normal',
                                    dataLabels: {
                                        enabled: true,
                                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || '#F2C45A'
                                    }
                                }
                            },
                            series: []

                        }

                        Highcharts.setOptions({
                            // sets comma for thousands separator
                            lang: {
                                thousandsSep: ','
                            }
                        });

                        $.getJSON("/charts/data/filers-test.php", function(json) {
                            options.xAxis.categories = json[0]['data'];
                            options.series[0] = json[1];
                            chart = new Highcharts.Chart(options);
                            chart.legend.allItems[0].update({name:'Total by Election Year'}); ///// LEGEND LABEL CHANGES HERE!
                        });
                    });