我的高效图目前在渲染图表后更新时不会使用饼图样条图

Question

这是我渲染后更新的代码。在此代码中，前三个按钮(plain, inverted and polar)工作正常，但最后两个按钮(pie, spline)无效。

var chart = Highcharts.chart('container', {

    title: {
             text: 'Chart.update'
    },

    subtitle: {
             text: 'Plain'
    },

    xAxis: {
             categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
            type: 'column',
            colorByPoint: true,
            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],
            showInLegend: false
    }]

    });


    $('#plain').click(function () {
        chart.update({
                    chart: {
                    inverted: false,
                    polar: false,
                    pie:false,
                    spline:false
                    },
        subtitle: {
                    text: 'Plain'
        }
        });
    });

    $('#inverted').click(function () {
    chart.update({
        chart: {
                inverted: true,
                polar: false,
                pie:false,
                spline:false
        },
        subtitle: {
                text: 'Inverted'
        }
        });
    });


    $('#polar').click(function () {
    chart.update({
        chart: {
                inverted: false,
                polar: true,
                pie:false,
                spline:false
        },
        subtitle: {
                text: 'Polar'
        }
        });
    });

    $('#pie').click(function () {
    chart.update({
        chart: {
                pie:true,
                inverted: false,
                polar: false,
                spline:false,
                plain:false
        },
        subtitle: {
                    text: 'Pie'
        }
        });
    });
    $('#spline').click(function () {
    chart.update({
        chart: {
                type:'spline',
                inverted: false,
                polar: false,
                pie:false,
                plain:false
        },
        subtitle: {
                text: 'spline'
        }
        });
    });

我正在从highcahrts.com学习这个主题，我想添加其他图表。

Answer 1

图表Pie和spline具有不同的通用图表，但柱形图可以用两种不同的形式表示plain表示默认柱形图，inverted表示柱形图表轴反转和极坐标具有XY坐标，X轴围绕周边缠绕，而Y轴从中心延伸到顶部。它们不能混合使用（饼形，样条曲线）改变形状（平面，倒置，极性）

所以要将图表更新为普通（列），倒置（列），极性，饼图，样条曲线我使用图表type。希望这是有意义的。

＆＃13;

＆＃13;

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  title: {
    text: 'Chart.update'
  },

  subtitle: {
    text: 'Plain'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{

    colorByPoint: true,
    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],
    showInLegend: false
  }]

});


$('#plain').click(function() {
  chart.update({
    chart: {
      type: 'column',
      inverted: false,
      polar: false
    },
    subtitle: {
      text: 'Plain'
    }
  }, true);
});

$('#inverted').click(function() {
  chart.update({
    chart: {
      type: 'column',
      inverted: true,
      polar: false
    },
    subtitle: {
      text: 'Inverted'
    }
  }, true);
});

$('#polar').click(function() {
  chart.update({
    chart: {
      type: 'column',
      inverted: false,
      polar: true
    },
    subtitle: {
      text: 'Polar'
    }
  }, true);
});
$('#pie').click(function() {
  chart.update({
    chart: {
      type: 'pie',
      inverted: false,
      polar: false
    },
    subtitle: {
      text: 'Pie'
    }
  }, true);
});
$('#spline').click(function() {
  chart.update({
    chart: {
      type: 'spline',
      inverted: false,
      polar: false
    },
    subtitle: {
      text: 'spline'
    }
  }, true);
});

＆＃13;

#container {
  min-width: 320px;
  max-width: 600px;
  margin: 0 auto;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>
<button id="plain" class="autocompare">Plain</button>
<button id="inverted" class="autocompare">Inverted</button>
<button id="polar" class="autocompare">Polar</button>
<button id="pie" class="autocompare">Pie</button>
<button id="spline" class="autocompare">Spline</button>

＆＃13;

＆＃13;

＆＃13;