Установите фон для каждого квадранта в полярных диаграммах AnyChart - PullRequest
Новая
       16

Установите фон для каждого квадранта в полярных диаграммах AnyChart

0 голосов
/ 12 июня 2018

Я создаю полярную диаграмму, используя 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>

Можно ли добавить фон для каждого квадранта?

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Вы можете сделать это, назначив палитру 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>
0 голосов
/ 12 июня 2018

Это очень гибко, вы можете просто установить свойство 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"}
]);

Для получения дополнительной информации, пожалуйста, см. Документы

...