0

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>
4

1 に答える 1