5

Jqplotで2つのシリーズのカラーバーを変える方法を知りたいです。シリーズデータが1つしかない場合は、下の画像のように完全に機能します

代替テキスト

その値に基づく赤と緑の色。

ただし、2つの系列データがある場合、各系列データに2つの系列色を設定することはできません。これまでのところ、このグラフしか作成できません

代替テキスト

2つのシリーズのグラフは、1つのシリーズのグラフだけでなく、その値に基づいて色を変えることができるようにしたいと思います。

これは私のコードです

chart = $.jqplot('map-chart', [dataChart, dataChart2], {
        title: 'TIME',
        legend: {
            renderer: $.jqplot.EnhancedLegendRenderer,
                        show: true,
                        location: 'ne'
        },
        series: [{label: 'Current data'}, {label: 'Worst data'}],
        //seriesColors: seriesColors1,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            pointLabels: {show: true}
            //rendererOptions:{
             //varyBarColor: true
            //}
        },
        axes: {
            xaxis: {
                label: 'station',
                renderer: $.jqplot.CategoryAxisRenderer,
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                ticks: tickers,
                tickOptions: {
                    angle: -30
                }
            },
            yaxis: {
              min: 0,
              label: 'Time',
              labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
              tickOptions: {
                    fontSize: '8pt'
              }
            }
        },
        highlighter: {show: false}
    });

試しseriesColors : [seriesColors1, seriesColors2]ましたが、うまくいきませんでした。

4

2 に答える 2

9

基本的に、エントリごとに辞書を含むシリーズ配列を作成する必要がありますseriesColors。次のjsfiddleに実際の例を示します。

plot1 = $.jqplot('chart1', [[50,100,50,50,75],[80,70,50,50,40]], 
{
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions:{ varyBarColor : true }
        },
        series: [
            {seriesColors: [ "#f00", "#4b0", "#b40", '#ff0', '#fb0']}, 
            {seriesColors: ["#a30", "#4b0", "#b40", '#af0', '#fa0']}
            ],
        highlighter: { show: false }
});

(外部 js ファイルが変更されると、フィドルが機能しなくなる可能性があります。デフォルトでは、jsfiddle には jqplot ライブラリがありません。)

于 2011-11-21T21:10:02.230 に答える
0

私は今日これに遭遇し、ジンボブ博士が予測したように、すべての外部ファイルがリンクの腐敗に屈した. 私は CDN サイトを見つけ、フィドルを最新のjQuery & JQPlot リソース ファイルに更新しました。

SOのJSFiddle警官を満足させるためだけに、これなしで投稿させてくれません：

//this is not my code, it's only here to satisfy the SO require that fiddles have
// code associated with them
plot1 = $.jqplot('chart1', [[50,100,50,50,75],[80,70,50,50,40]], {
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions:{ varyBarColor : true }
        },
    series: [
            {seriesColors: [ "#f00", "#4b0", "#b40", '#ff0', '#fb0']}, 
            {seriesColors: ["#00f",  "#b0b", "#a30", "#4b0", '#af0']}
            ],
        highlighter: { show: false }
});

フィドル自体とは何の関係もありませんでしたが、更新しただけで機能しました。これが誰かに役立つことを願っています（私が探していたものではなかったことが判明しましたが、あなたはお金を払い、あなたのチャンスをつかみます）。

于 2014-11-05T23:34:12.177 に答える