在AnyChart极坐标图中为每个象限设置背景

Question

I am creating a polar chart using AnyChart

 anychart.onDocumentReady(function () { // create polar chart var chart = anychart.polar(); var columnSeries = chart.column([ {x: 'A', value: 28.7}, {x: 'B', value: 19}, {x: 'C', value: 17.7}, {x: 'D', value: 34.7} ]); // set series name columnSeries.name('Percentage'); // set title settings chart.title() .enabled(true) .text('Test') .padding({bottom: 20}); // disable y-axis chart.yAxis(false); // set value prefix for tooltip chart.tooltip().valuePrefix('%'); chart.sortPointsByX(true); // set x-scale chart.xScale('ordinal'); // set chart container id chart.container('container'); // initiate chart drawing chart.draw(); }); 

 html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } 

 <script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script> <div id="container"></div> 

Is it possible to add a background for each quadrant?

Answer 1

You can do that by assigning a palette of the xGrid:

chart.xGrid().palette(["red 0.5", "green 0.5", "blue 0.5", "cyan 0.5"]);

See a snippet:

 anychart.onDocumentReady(function () { // create polar chart var chart = anychart.polar(); var columnSeries = chart.column([ {x: 'A', value: 28.7}, {x: 'B', value: 19}, {x: 'C', value: 17.7}, {x: 'D', value: 34.7} ]); // set series name columnSeries.name('Percentage'); // set title settings chart.title() .enabled(true) .text('Test') .padding({bottom: 20}); // disable y-axis chart.yAxis(false); // set value prefix for tooltip chart.tooltip().valuePrefix('%'); chart.sortPointsByX(true); chart.xGrid().palette(["red 0.5", "green 0.5", "blue 0.5", "cyan 0.5"]); // set x-scale chart.xScale('ordinal'); // set chart container id chart.container('container'); // initiate chart drawing chart.draw(); }); 

 html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } 

 <script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script> <div id="container"></div> 

Answer 2

It is very flexible, you can just set the fill property on your data definition, eg:

var columnSeries = chart.column([
    {x: 'A', value: 28.7, fill: "#990000"},
    {x: 'B', value: 19, fill: "#009900"},
    {x: 'C', value: 17.7, fill: "#000099"},       
    {x: 'D', value: 34.7, fill: "#990099"}
]);

For more info, please refer to the docs