Можно ли установить цвет фона сектора на радиолокационной карте в Chart.js?

Question

Можно ли установить цвет фона сектора на радиолокационной карте в Chart.js?

0

Я хочу, чтобы цвет секторов в моей радарной диаграмме выглядел так:

Возможно ли это в Chart.js? Есть ли другой пакет диаграмм, который может это сделать?

Если он сможет хорошо работать с AngularJS, это будет еще лучше.

Niel 29 июнь 2016, в 20:04

Источник

0

какую версию chart.js вы используете?
Saurabh Sonawane 29 июнь 2016, в 19:30
0

1.1.1, потому что он работает с angular-chart. Но если мне нужно, я обновлюсь до v2.
Niel 29 июнь 2016, в 19:36

Теги:

jquery

angularjs

css

chart.js

2 ответа

1

Вы можете обмануть его, изменив размер масштабирования.

Попробуйте установить scaleLineWidth в соответствии с вашими требованиями, например,

var radarOptions = {
    scaleLineWidth :16 ,
}

Проверьте эту скрипку здесь

Увеличьте scaleLineWidth до заполнения пробела между двумя строками.

там вы также можете установить scaleLineColor, чтобы он выглядел как фон,

var radarOptions = {
    scaleLineWidth :16 ,
    scaleLineColor : "#EEEEEE"
}

Проверьте эту скрипку здесь

Saurabh Sonawane 29 июнь 2016, в 17:44

0

Спасибо, это определенно на правильном пути. Но тогда как бы мне сделать разные "scaleLines" разными цветами? В вашей второй скрипке они все одного цвета.
Niel 29 июнь 2016, в 21:03
0

@Niel Я давно не пробовал, но для этого вам нужно пройти через функцию, которая рисует линии радара, т.е. масштабные линии, и на каждой итерации вы должны установить scaleLineColor. А пока я проверю лучшее решение.
Saurabh Sonawane 30 июнь 2016, в 05:44
0

Я не уверен, что именно вы имели в виду, но я нашел довольно аккуратное решение. Можно ли нарисовать на графике 3 линии, каждая из которых имеет цвет, которым вы хотите, чтобы был сектор? Установите значения данных так, чтобы они выравнивали каждый сектор, а затем установите ширину линии равной ширине сектора. Имеет ли это смысл, будет ли это работать?
Niel 06 июль 2016, в 04:29

Показать ещё 1 комментарий

Ещё вопросы

какую версию chart.js вы используете?
1.1.1, потому что он работает с angular-chart. Но если мне нужно, я обновлюсь до v2.
Спасибо, это определенно на правильном пути. Но тогда как бы мне сделать разные "scaleLines" разными цветами? В вашей второй скрипке они все одного цвета.
@Niel Я давно не пробовал, но для этого вам нужно пройти через функцию, которая рисует линии радара, т.е. масштабные линии, и на каждой итерации вы должны установить scaleLineColor. А пока я проверю лучшее решение.
Я не уверен, что именно вы имели в виду, но я нашел довольно аккуратное решение. Можно ли нарисовать на графике 3 линии, каждая из которых имеет цвет, которым вы хотите, чтобы был сектор? Установите значения данных так, чтобы они выравнивали каждый сектор, а затем установите ширину линии равной ширине сектора. Имеет ли это смысл, будет ли это работать?

Niel · Accepted Answer · 2016-07-28T20-39-00.000Z

Ответ Saurabh, а также приведенный здесь, не будет работать, потому что заполнение всего фона скроет ярлыки и даст разные области для каждого сектора.

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

Поэтому построим данные в угловом виде следующим образом:

<canvas id="spider_chart" class="chart chart-base" chart-type="'Radar'"
        chart-data="angular_spider_chart.data"
        chart-options="angular_spider_chart.options"
        chart-labels="angular_spider_chart.labels"
        chart-series="angular_spider_chart.series"
        chart-colours="angular_spider_chart.colors">
</canvas>

<script>
    function makeList(n, v){
        // Make a list of data with n points all having v as value
        var x = [];
        for (; n>0; x[--n] = v);
        return x;
    }

    function getColour (colour) {
        // return colour object to override angular-chart getColour function
        return {
            fillColor: colour,
            strokeColor: colour,
            pointColor: colour,
            pointStrokeColor: '#fff',
            pointHighlightFill: '#fff',
            pointHighlightStroke: colour
        };
    }

    // build spider chart
    function initialize_spider_chart (chart_data, label){
        // the color you want to use in your dataset
        var colors = ["#000"];
        var labels = [];
        var data = [];
        var series = []
        // turn of animation otherwise "belts" animate
        var options =  {title: {display: true, text:label},
                scaleLineWidth :1,
                scaleShowLabels : false,
                pointDot : false,
                angleLineColor: "#e6e6e6",
                borderColor: "#737373",
                backgroundColor: '#cccccc',
                animation: false,
                showTooltips: false
            };
        // the sector values and colors of your backgrounds
        var belts = [[4, '#ef5350'], [3, '#ffaa00'], [2, '#00b19d'], [1, '#228bdf']];
        for (var idx in belts){
            var cp = belts[idx];
            data.push(makeList(chart_data.length, cp[0]));
            series.push("")
            colors.unshift(getColour(cp[1]))
        }
        var actual_data = [];
        for (var c in chart_data){
            labels.push(chart_data[c].name);
            actual_data.push(chart_data[c].value);
        }
        series.push('Banded Radar Chart');
        data.push(actual_data);
        return {'data': data,
                'labels': labels,
                'options': options,
                'colors': colors,
                'series': series
                };
    };
</script>

Дает мне это: