Диаграмма полярных областей PrimeFaces - изменение цвета линии сетки

#javascript #charts #primefaces #chart.js #jqplot

#javascript #Диаграммы #primefaces #chart.js #jqplot

Вопрос:

У меня есть p:polarAreaChart диаграмма в моем приложении, и я использую Primefaces primefaces-7.0.RC1 с JSF2.

Я хочу изменить цвет линии каждого круга (линии сетки). Я пробовал следующий код, но он вообще не работал.

 gridLines.setDisplay(true);

gridLines.setColor("rgb(255, 255, 255)");

gridLines.setLineWidth(10);

radialScales.setGridLines(gridLines);

options.setScales(radialScales);

polarAreaMode.setOptions(options);

Пожалуйста, дайте мне знать, что я здесь сделал не так?

1. Пожалуйста, добавьте ошибку / фактический результат в сравнении с ожидаемым результатом.

2. Я не получил никакой ошибки. Ожидаемый результат — «Линия сетки должна быть изменена на цвет, который я упомянул», но ничего не происходило.

Ответ №1:

Похоже, вы можете сделать это легко. Смотрите этот пример: https://www.chartjs.org/samples/latest/charts/polar-area.html

и в исходном виде этой страницы с использованием «backgroundColor»:

         var randomScalingFactor = function() {
            return Math.round(Math.random() * 100);
        };

        var chartColors = window.chartColors;
        var color = Chart.helpers.color;
        var config = {
            data: {
                datasets: [{
                    data: [
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                    ],
                    backgroundColor: [
                        color(chartColors.red).alpha(0.5).rgbString(),
                        color(chartColors.orange).alpha(0.5).rgbString(),
                        color(chartColors.yellow).alpha(0.5).rgbString(),
                        color(chartColors.green).alpha(0.5).rgbString(),
                        color(chartColors.blue).alpha(0.5).rgbString(),
                    ],
                    label: 'My dataset' // for legend
                }],
                labels: [
                    'Red',
                    'Orange',
                    'Yellow',
                    'Green',
                    'Blue'
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'right',
                },
                title: {
                    display: true,
                    text: 'Chart.js Polar Area Chart'
                },
                scale: {
                    ticks: {
                        beginAtZero: true
                    },
                    reverse: false
                },
                animation: {
                    animateRotate: false,
                    animateScale: true
                }
            }
        };

И, просматривая исходный код PrimeFaces для PolarAreaChart, я вижу, что backgroundColor принимает список строк, которые являются строкой RGB.

 public class PolarAreaChartDataSet extends ChartDataSet {

    private static final long serialVersionUID = 1L;

    private List<Number> data;
    private List<String> backgroundColor;
    private List<String> borderColor;
    private List<Number> borderWidth;
    private List<String> hoverBackgroundColor;
    private List<String> hoverBorderColor;
    private List<Number> hoverBorderWidth;