在AnyChart極坐標圖中為每個象限設置背景

Question

我正在使用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> 

是否可以為每個象限添加背景？

Answer 1

您可以通過分配xGrid的調色板來做到這一點：

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

查看摘要：

 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

這非常靈活，您可以在數據定義上設置fill屬性，例如：

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"}
]);

有關更多信息，請參閱文檔