グラフの背景色を設定する

Question

テーマを使用していますが、チャートの周りに背景色を白または透明なものに設定したいと思います。

私はこのコードをしようとしています：

var myTheme = dojox.charting.themes.PlotKit.orange; 

    myTheme.fill= "white"; 

    chart10.setTheme(myTheme); 


chart10.addPlot("default", { 
    type: "Pie", 
    labelOffset: -30, 
    radius: 150, 
    startAngle: 45, 
    font: "normal normal 10pt Tahoma", 
    fontColor: "black", 
    labelWiring: "grey", 
    labelStyle: "columns", 
    htmlLabels: true, 
    plotarea: { fill: "#000" } 
}); 

をしかし、このコードは、どれも変更が見える作品ではありませんでした。

どのように色の背景を設定できますか？

Answer 1

私はあなたがchart.fillとplotarea.fillプロパティの両方を設定するために持っていると信じています。

myTheme.chart.fill= "white"; 
    myTheme.plotarea.fill = "white"; 

あなたがテーマオブジェクトのすべてのプロパティを調べることができないconsole.debug(myTheme)場合。私は通常、私が正しいものを見つける前に少し実験しなければならない。

Answer 2

私はこれが古いと知っていますが、私は円グラフを作成していて、円グラフの背景色を変更する必要がありました。私はこの解決策を試しましたが、私はテーマを割り当てていなかったので動作しませんでした。私はこのように作成しています：

var pieChart = new Chart("myDIV"); 
pieChart.addPlot("default", {type: "Pie"}); 
pieChart.addSeries("Series A", pieString); 

私のpieStringは、私が変数をまとめてパイを形成する場所です。基本的に、私はこのような一連のステートメントを連結：

{y:200, tooltip: "layer", color:"red", text: "myText"}

私は一緒にそれらの文字列を結合し、私のpieString変数に割り当てます。

私は自分のチャートを設定すると、その背景に標準的な白い背景があります。それは、私が色を混ぜることができてから、色のついた背景にはうまくいきません。バックグラウンドを構成する2つの長方形があります。 pieChart.fill = "something"を使って、大きくて遠いものを変更することはできますが、内側のものは変更しません。

私が私のためにこれを解決する方法は、このようなものです。

function ClearChartBackground() { 
    var sumDivRects = document.getElementById("chartDIV").getElementsByTagName("svg")[0].getElementsByTagName("rect"); //so I am getting the rectangles that are part of my chart div 

    var firstRect = sumDivRects[0]; 
    var secondRect = sumDivRects[1]; 
    firstRect.attributes.item(1).value = "0"; 
    secondRect.attributes.item(1).value = "0"; 
    //this drills down to the 'fill-opacity' attribute that can then be changed to make it transparent 


} 

私の写真に見られるように、元の背景は白で、灰色の背景ではうまく機能しません。私の機能を実行した後、それは透明に変更されます。

Dojoでレンダリングしているので、これを変更する方法を知るのにかなり時間がかかりましたので、これを投稿しています。私はこのポストに出くわしましたが、私はテーマをしていないので、私はそれから多くの助けを得ていませんでした。 jQueryのを使用して

Answer 3

は、あなたがこのような何かを行うことができます。

$("#chartNode svg rect:eq(0)").attr("fill", "0"); 
$("#chartNode svg rect:eq(0)").attr("fill-opacity", "0"); 

だから、基本的にあなたが要素にアクセスして、手動で属性を変更します。それは非常に効率的な方法ではありませんが、それはトリックを行います。

Answer 4

dojox.charting.themes.Claro.chart.fill = "#F1F1F0" 
dojox.charting.themes.Claro.plotarea.fill = "#F1F1F0" 
dojox.charting.themes.Claro.chart.stroke = "#F1F1F0" 

// Set the theme 
chart.setTheme(dojox.charting.themes.Claro);