我已经在我的项目中实现了一个图表并且运行良好。
现在我想在特定的 X 轴 onclick 上动态添加一个点。
这是我迄今为止尝试过的 fiddle 。 Fiddle Demo
代码
plotOptions: {
series: {
cursor: 'ns-resize',
point: {
events: {
drag: function(e) {},
drop: function() {
var y_val = Highcharts.numberFormat(this.y, 2);
var x_val = Highcharts.numberFormat(this.x, 2);
updater(y_val, x_val);
console.log(options.series[1].data);
}
}
},
现在有一种方法可以在点击时在 X 轴 上添加一个点。例如，如果我们在 10%-20% 之间单击，则应在 X 轴上添加一个 15% 点。它也应该附加在表中。
感谢帮助
最佳答案
您好，这可能是您的目标未完全实现的另一种方式，但我正在为您提供一些如何实现的想法 我已经使用 cookie 来实现这个
你的头应该是这样的
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="Scripts/jquery.cookies.2.2.0.js" type="text/javascript"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
这是你的html
<table id="datatable" style="float:left;">
<thead>
<tr>
<th>X Axis</th>
<th>Y Axis</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
我没有在你的表格中包含你必须做的要点
现在这应该是你的脚本
<script>
window.onload = function () {
var val;
var cat_array1; var cat_array2;
var data_variables = [0, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1];
/*global window: false */
if ($.cookie("cat_array1")) {
var cookie = unescape($.cookie('cat_array1'))
cat_array1 = cookie.split(',')
var cookie1 = unescape($.cookie('cat_array2'))
cat_array2 = cookie1.split(',')
}
else {
var cat_array1 = ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'];
var cat_array2 = ['5%', '10%', '15%', '20%', '25%', '30%', '35%', '40%', '45%', '50%'];
$.cookie("cat_array1", cat_array1.join(','));
$.cookie("cat_array2", cat_array1.join(','));
}
function regenrate() {
options = {
chart: {
renderTo: 'container',
animation: false,
events: {
click: function () {
alert('click');
}
}
},
xAxis: {
categories: cat_array1
},
plotOptions: {
series: {
cursor: 'ns-resize',
point: {
events: {
drag: function (e) {
},
drop: function () {
var y_val = Highcharts.numberFormat(this.y, 2);
var x_val = Highcharts.numberFormat(this.x, 2);
updater(y_val, x_val);
console.log(options.series[1].data);
},
click: function () { var options = this.options; alert('Person who like' + options.name + ' ' + options.personName); }
}
},
stickyTracking: true
},
column: {
stacking: 'normal'
}
},
tooltip: {
yDecimals: 2
},
series: [{
name: 'main',
data: data_variables,
draggableY: false,
dashable: true
}, {
name: 'modifier',
data: [0, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1],
draggableY: true
}]
}
function updater(yv, xv) {
//console.log("Y :" + yv + ",X: " + xv);
var num = xv.match(/^\d+/);
console.log(num);
options.series[1].data[num] = parseInt(options.series[1].data[num].y.toFixed(1));
var chart = new Highcharts.Chart(options);
$('#b' + num).html(yv);
console.log(yv + ", " + xv);
return false;
}
var chart = new Highcharts.Chart(options);
var yAxis = chart.xAxis[0];
var onYaxisRedraw = function () {
for (var tickPos in yAxis.ticks) {
if (tickPos != '-1') {
var $element = $(yAxis.ticks[tickPos].label.element);
$element.unbind('click');
$element.click(function (e) {
// cat_array1.push(1,parseInt(e.toElement.innerHTML.replace('%', '')) + 5 + '%');
var aa = jQuery.inArray(e.toElement.innerHTML, cat_array1);
cat_array1.splice(parseInt(aa + 1), 0, parseInt(e.toElement.innerHTML.replace('%', '')) + 5 + '%');
// options.xAxis = cat_array1;
$.cookie("cat_array1", cat_array1.join(','));
// chart.series[0].setData(null,true);
// var chart = new Highcharts.Chart(options);//$('#container').highcharts().xAxis[0].update()
window.location.reload();
// regenrate()
});
}
}
}
onYaxisRedraw();
yAxis.redraw(onYaxisRedraw);
}
regenrate();
}
</script>
Explaination :-
你有要求应该在 10% 到 20% 之间点击，但我认为这是不可能实现的，虽然我不确定:)
但是如果你点击 10% 然后在那个数组你可以添加 5 然后就可以了我希望你能理解我的观点
这是另一种方法，如果您单击数组中的 10%，则将向其添加 15%
好的，我希望你能理解我的意思......
关于javascript - 使用 Javascript/Jquery 添加点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23534164/