Как динамически изменить тип диаграммы в биржевой диаграмме?

Question

Я хочу динамически изменить тип своего графика на биржевом графике.

По сути, я хочу изменить тип диаграммы ohlc на линию, площадь, сплайн, areapline, столбец, барный подсвечник и т. Д. Я делаю это, добавляя внешний выпадающий список и основываясь на значении, выбранном в выпадающем меню. меняю тип серии на соответствующие значения, но здесь есть проблема.

Формат данных для 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);

Если вы хотите изменить xAxis и формат данных, вам нужно обновить переменную 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>