Highchart蜘蛛网图表

时间:2017-01-04 00:30:36

标签: javascript css angularjs highcharts highcharts-ng

我使用highcharts创建了一张蜘蛛图,但数据点已经移到了最左边。我正在关注这个example。这是我的代码:

<div id="container2" style=" position: relative;"></div>

<script>
    $(function () {

        $('#container2').highcharts({

            chart: {
                polar: true,
                type: 'line',
                margin: 0
            },

            exporting: {
                enabled: false,
                buttons: {
                    enabled: false
                }
            },

            title: {
                text: '&nbsp',
                x: -80,
                useHTML: true
            },

            pane: {
                size: '70%'
            },

            xAxis: {
                categories: ['Math', 'Comp. Sci', 'Science', 'Social Sci.', 'English', 'Hindi'],
                tickmarkPlacement: 'on',
                lineWidth: 0,
                labels: {
                    align: 'center',
                    distance: 43
                }
            },

            yAxis: {
                gridLineInterpolation: 'polygon',
                lineWidth: 0,
                min: 0,
                endOnTick: true,
                showLastLabel: true,
                tickPositions: [0.2, 0.4, 0.6, 0.8, 1.0]
            },

            tooltip: {
                shared: true,
                headerFormat: '<span style="font-size: 12px">{point.key}:</span>&nbsp;&nbsp;<b>{point.y:,.2f}</b>',
                pointFormat: '',
                useHTML: true
            },

            legend: {
                enabled: true,
                align: 'right',
                verticalAlign: 'top',
                y: 30,
                layout: 'vertical'
            },

            series: [{
                name: 'Grade Distribution',
                data: [.8, .95, .7, .35, .6, .3],
                pointPlacement: 'on',
                color: 'black',
                fillOpacity: 0.2
            }]

        });
    });

我在代码中查找了干扰css,但没有找到任何内容。知道是什么导致了这个吗?

enter image description here

2 个答案:

答案 0 :(得分:0)

相同的代码没有问题,

<div id="container2" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

<强> DEMO

答案 1 :(得分:0)

您可能有旧版本的highchart。下载最新版本可以解决我的问题。