如何在高股票股票图表中动态更改图表类型?

Question

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

基本上，我想将 ohlc 图表类型更改为折线、面积、样条、面积、柱形、条形烛台等。我通过添加一个外部下拉列表来做到这一点，并根据下拉列表中选择的值，我将系列类型更改为它们各自的值，但这里有一个问题。

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>