Highcharts从Column到Spiderweb的过渡

时间:2017-06-27 17:17:38

标签: javascript jquery charts highcharts

我一直在尝试使用highcharts来渲染简单的柱形图。我一直有几个问题。最初我设置了一个柱状图,工作得很好。我想在点击按钮后将其变成蜘蛛网图表(具有不同的数据)。我在按钮单击中将chart.polar变为true,但它将图表呈现为折线图而不是蜘蛛网。我在这里错过了什么吗? 这是我的按钮点击功能中的代码:

$('#spider_button').on('click', function () {
        options.chart.renderTo = 'main_chart_container';
        options.chart.polar = true;
        options.chart.type = 'line';
        options.xAxis.categories = ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'];
        options.title.text = 'Daily UFO Sightings';
        options.series = [{"data": [129, 105, 149, 115], "name": "Triangle"}, {"data": [121, 100, 131, 78], "name": "Fireball"}, {"data": [56, 50, 46, 47], "name": "Formation"}, {"data": [279, 240, 310, 289], "name": "Light"}, {"data": [153, 196, 182, 147], "name": "Circle"}, {"data": [13, 16, 17, 22], "name": "Chevron"}, {"data": [4, 8, 12, 7], "name": "Egg"}, {"data": [14, 16, 14, 20], "name": "Diamond"}, {"data": [18, 24, 15, 15], "name": "Cylinder"}, {"data": [58, 49, 54, 49], "name": "Disk"}, {"data": [31, 28, 37, 24], "name": "Changing"}];
        var chart1 = new Highcharts.Chart(options);
    });

这是小提琴:https://jsfiddle.net/adway/gv7a6ngg/7/

1 个答案:

答案 0 :(得分:2)

极地图表需要highcharts-more.js。 http://api.highcharts.com/highcharts/chart.polar

<script src="https://code.highcharts.com/highcharts.js"></script>

https://jsfiddle.net/gv7a6ngg/9/