2013-06-17 4 views
0

Я пытаюсь изменить цвет баров на гистограмме в jqPlot. Я нашел метод репликации, который успешно меняет цвет баров, но, похоже, он инициирует обновление страницы, которое затем просто сбрасывает параметры того, что было, когда первоначально загружалась страница. Что я здесь делаю неправильно?jqPlot - Replot без обновления страницы

Replot:

$('#changeColor1').click(function(){ 
    plot1.replot({ 
     seriesDefaults: { 
      rendererOptions: { 
       varyBarColor: true 
      } 
     }, 
     seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"] 
    }); 
}); 

Chart Config:

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

Почему при вызове метода с параметрами возникает полное обновление страницы? это не имеет никакого смысла, если только это не было всей целью метода. Вы уверены, что обновление не происходит, потому что вы нажимаете на тег Anchor с идентификатором «id =» changeColor1 «href =» «? –

+0

Я понятия не имею, почему это происходит. Я использую тег '

+1

есть кнопка в виде? у формы уже есть кнопка отправки? Если кнопка отправки отсутствует, первой кнопкой, которая будет найдена, будет кнопка отправки. –

ответ

2

Если у вас есть форма с одна кнопка, одна кнопка будет кнопкой отправки, если вы не дадите ей type="button". Однако, вероятно, безопаснее использовать e.preventDefault, так как вы не намерены использовать кнопку, чтобы сделать что-либо, кроме вашего события click.

$('#changeColor1').click(function(event){ 
    event.preventDefault(); 
    //... 
}); 
Смежные вопросы