如何在高库存图表中动态更改图表类型？

Question

我想在highstock股票图表中动态更改我的图表类型。

基本上，我想将ohlc图表类型更改为line，area，spline，areaspline，column，bar candlestick等。我这样做是通过添加外部下拉菜单并根据下拉列表中选择的值，我正在更改系列类型各自的值，但这里有一个问题。

ohlc和烛台的数据格式与其他数据格式不同，因此即使图表呈现为线条，区域等，值也不正确。

有没有办法在不更改数据格式的情况下添加其他图表类型，或者如果我必须更改数据格式，请告诉我如何更改xaxis，因为其他数据格式需要提及外部xaxis。

谢谢您的帮助。

Answer 1

你可以设置options.chart.type = 'column'; //chart type

 options.chart.renderTo = 'container';
 options.chart.type = 'column';
 var chart1 = new Highcharts.Chart(options);

如果要更改x轴和数据格式，则需要更新options变量

$(function () {    


// Create the chart

var options = {
    chart: {
       events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {

                    var chart = this;

                        

                    // Show the loading label
                    chart.showLoading('Loading ...');

                    setTimeout(function () {
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, series);
                    }, 1000); 
                }

            }
        },
        plotBorderWidth: 0
    },

    title: {
        text: 'Change chart type',
    },
    //
    subtitle: {
            text: 'Subtitle'
    },
    //
    xAxis: {
            type: 'category',
    },
    //
    yAxis: {

            title: {
                margin: 10,
                text: 'No. of user'
            },      
    },
    //
    legend: {
        enabled: true,
    },
    //
    plotOptions: {
        series: {
            pointPadding: 0.2,
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        },
        pie: {
            plotBorderWidth: 0,
            allowPointSelect: true,
            cursor: 'pointer',
            size: '100%',
            dataLabels: {
                enabled: true,
                format: '{point.name}: <b>{point.y}</b>'
            }
        }
    },
    //
     series: [{
        name: 'Case',
        colorByPoint: true,
        data: [3, 2, 1, 3, 4]
    }],
    //
    drilldown: {
        series: []
    }
};

// Column chart
options.chart.renderTo = 'container';
options.chart.type = 'column';
var chart1 = new Highcharts.Chart(options);

chartfunc = function()
{
var column = document.getElementById('column');
var bar = document.getElementById('bar');
var pie = document.getElementById('pie');
var line = document.getElementById('line');

        
if(column.checked)
    {
        
        options.chart.renderTo = 'container';
        options.chart.type = 'column';
        var chart1 = new Highcharts.Chart(options);
    }
else if(bar.checked)
    {
        options.chart.renderTo = 'container';
        options.chart.type = 'bar';
        var chart1 = new Highcharts.Chart(options);
    }
else if(pie.checked)
    {
        options.chart.renderTo = 'container';
        options.chart.type = 'pie';
        var chart1 = new Highcharts.Chart(options);
    }
else
    {
        options.chart.renderTo = 'container';
        options.chart.type = 'line';
        var chart1 = new Highcharts.Chart(options);
    }

}

$('#change_chart_title').click(function(){
   
    var chart = $('#container').highcharts();
        
    //alert('Chart title changed to '+new_title+' !');
    
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<input type="radio" name="mychart" class="mychart" id= "column" value="column" onclick= "chartfunc()" checked>Column
<input type="radio" name="mychart" class="mychart" id= "bar" value="bar" onclick= "chartfunc()">Bar
<input type="radio" name="mychart" class="mychart" id= "pie" value="pie" onclick= "chartfunc()">Pie
<input type="radio" name="mychart" class="mychart" id= "line" value="line" onclick= "chartfunc()">Line
<br />

<input type="button" id="change_chart_title" value="Change">  

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>