javascript - jqPlot - 重新绘制而不刷新页面

Question

我正在尝试更改 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>

Answer 1

如果您的表单只有一个按钮，则该按钮将是提交按钮，除非您指定 type="button"。但是，仅使用 e.preventDefault 可能更安全，因为您不打算让按钮执行除单击事件之外的任何操作。

$('#changeColor1').click(function(event){
    event.preventDefault();
    //...
});