我正在尝试更改jqPlot中条形图上条形的颜色。我找到了成功改变条形颜色的replot方法,但它似乎启动了页面刷新,然后只是将选项重置为页面最初加载时的选项。我在这里做错了什么?
重绘图:
$('#changeColor1').click(function(){
plot1.replot({
seriesDefaults: {
rendererOptions: {
varyBarColor: true
}
},
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"]
});
});
图表配置:
plot1 = $.jqplot('Chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
title: {
text: 'Chart1',
fontSize: '15pt',
fontWeight: 'bold',
},
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
rendererOptions: {
barDirection: 'horizontal',
barWidth: 15,
color: 'rgb(230,230,245)'
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
},
axes: {
xaxis: {
pointLabels: { show: true },
max: tcMax,
min: 0,
tickRenderer: $.jqplot.AxisTickRenderer,
tickOptions: {
fontSize: '12px',
formatter: function(format, value){
return parseInt(value / 1000) + ' K';
},
},
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: Ticks,
tickOptions: {
renderer: $.jqplot.CanvasAxisTickRenderer,
rendererOptions: {
fontSize: '12px',
},
},
}//end yaxis
},
highlighter: {
showTooltip: true,
tooltipLocation: 'e',
sizeAdjust: 0,
tooltipContentEditor: tooltipContentEditor,
},
grid: {
background: 'rgb(72, 102, 137)',
},
});
HTML:
<table style="width:100%;">
<tbody>
<tr>
<td><button id="changeColor1">Change Color</button></td>
</tr>
<tr>
<div id="Chart1" style="height:900px;width:700px; "></div>
</tr>
</tbody>
</table>
答案 0 :(得分:2)
如果您的表单只有一个按钮,那么除非您提供type="button"
,否则该按钮将成为提交按钮。但是,使用e.preventDefault
可能更安全,因为您不希望按钮执行除点击事件之外的任何操作。
$('#changeColor1').click(function(event){
event.preventDefault();
//...
});