gpt4 book ai didi

javascript - 在图表之间切换

转载 作者:行者123 更新时间:2023-12-01 05:19:01 26 4
gpt4 key购买 nike

我有 2 个单选按钮,如下所示:

<h4>Graph Type</h4>
<label class="radio"><?= form_radio('graph_type', 'type1', TRUE) ?>Type1</label>
<label class="radio"><?= form_radio('graph_type', 'type2', FALSE) ?>Type2</label>

我有一个如下的函数来显示图表:如果我有plotOptions,那么它会显示一个堆积图表,如果我删除plotOptions,那么它会显示一个普通图表。如何在我的单选按钮的更改事件中执行此操作?

var testSettings = function(chart){

var data = {
chart: {
type: type,
renderTo: renderTo,
height: height,
width: tabWidth
},
title: {
text: chart.label
},

plotOptions: {
area: {
stacking: 'normal',
dataLabels: {
useHTML: true
},
pointPadding: 0,
groupPadding: 0.12,
},
column: {
stacking: 'normal',
}
},

return data;

}

最佳答案

If I choose the radio option as type1 , then data should contain everything as above.But if the radio option is type2, then "data" should not contain the "plotoptions".

如果您想使用 codeigniter 表单助手,请将 radio 输入替换为 form_radio

// Onchange pass selected value
$('input[name="graph_type"]').on('change', function() {
activateChart($(this).val());
});

var activateChart = function(type) {
// here you put your actual chart options object

var settings = testSettings({
label: 'this is for test',
type: 'line',
renderTo: 'hsdiv',
height: '500px',
tabWidth: '600px'
});

switch (type) {
case "type1":
// no change to options
break;

case "type2":
// delete plotOptions
delete settings.plotOptions;

// if you want to add somemore options here, you can

break;
}

// after change what's changed
console.log(type);
console.log(settings);

// All set then
// chart = new Highcharts.Chart(settings);
}

var testSettings = function(chart) {

// Better to have default, to avoid exception, if arguments not supplied properly

var defaults = {
type: 'line',
renderTo: 'container',
height: '300px',
tabWidth: '400px',
label: 'Chart Label'
};

// extend with given arguments
var settings = $.extend({}, defaults, chart || {});

var data = {
chart: {
type: settings.type,
renderTo: settings.renderTo,
height: settings.height,
width: settings.tabWidth
},
title: {
text: settings.label
},

plotOptions: {
area: {
stacking: 'normal',
dataLabels: {
useHTML: true
},
pointPadding: 0,
groupPadding: 0.12,
},
column: {
stacking: 'normal',
}
}

};
return data;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Graph Type</h4>
<label class="radio"><input type="radio" name="graph_type" value="type1"/> Type1</label>
<label class="radio"><input type="radio" name="graph_type" value="type2"/>Type2</label>

关于javascript - 在图表之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46666332/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com