我可以更改风向图表中某些图例项目的颜色吗?

问题描述 投票:1回答:1

我已经通过使用有关西班牙各地区食品类别碳足迹的一些个人数据,修改了在https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/polar-wind-rose/中可以找到的极性风玫瑰样本。

结果是此图表:https://jsfiddle.net/PLomas/6a45q1r3/2/

但是,正如您所看到的,图例的最后三个和前三个类别具有相同的颜色。我想更改最后三种颜色,以避免类别混淆。代码是:

// Parse the data from an inline table using the Highcharts Data plugin
Highcharts.chart('container', {
    data: {
        table: 'freq',
        startRow: 1,
        endRow: 18,
        endColumn: 13
    },

    chart: {
        polar: true,
        type: 'column'
    },

    title: {
        text: 'Huella de carbono Comunidades Autónomas por categorías alimentos 2006'
    },

    subtitle: {
        text: 'Fuente: Elaboración propia'
    },

    pane: {
        size: '85%'
    },

    legend: {
        align: 'right',
        verticalAlign: 'top',
        y: 100,
        layout: 'vertical'
    },

    xAxis: {
        tickmarkPlacement: 'on'
    },

    yAxis: {
        min: 0,
        endOnTick: false,
        showLastLabel: true,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {
                return this.value;
            }
        },
        reversedStacks: false
    },

    tooltip: {
        valueSuffix: ' kg CO2-eq/habitante'
    },

    plotOptions: {
        series: {
            stacking: 'normal',
            shadow: false,
            groupPadding: 0,
            pointPlacement: 'on'
        }
    }
});
.highcharts-figure, .highcharts-data-table table {
    min-width: 360px;
    max-width: 860px;
    margin: 1em auto;
}
.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
    </p>
</figure>

<div style="display:none">
    <table id="freq" border="0" cellspacing="0" cellpadding="0">
        <tr nowrap bgcolor="#CCCCFF">
            <th colspan="18" class="hdr">Huella carbono por categorías</th>
        </tr>
        <tr nowrap bgcolor=>
            <th class="freq">Categoría alimentos</th>
            <th class="freq">Pan y cereales</th>
            <th class="freq">Carne</th>
            <th class="freq">Pescado</th>
            <th class="freq">Leche, derivados y huevos</th>
            <th class="freq">Aceites y grasas</th>
            <th class="freq">Frutas</th>
            <th class="freq">Hortalizas, legumbres y tubérculos</th>
            <th class="freq">Azúcar y dulces</th>
            <th class="freq">Café, té y cacao</th>
            <th class="freq">Agua mineral, refrescos y zumos</th>
            <th class="freq">Espirituosos y licores</th>
            <th class="freq">Vinos</th>
            <th class="freq">Cerveza</th>            
        </tr>
        <tr nowrap>
            <td class="dir">Andalucía</td>
            <td class="data">92.1</td>
            <td class="data">523.3</td>
            <td class="data">181.3</td>
            <td class="data">288.9</td>
            <td class="data">19.9</td>
            <td class="data">73.7</td>
            <td class="data">56.5</td>
            <td class="data">15.9</td>
            <td class="data">8.8</td>
            <td class="data">50.8</td>
            <td class="data">4.2</td>
            <td class="data">17.6</td>
            <td class="data">21.2</td>
        </tr>        
        <tr nowrap bgcolor="#DDDDDD">
            <td class="dir">Aragón</td>
            <td class="data">80.9</td>
            <td class="data">723.4</td>
            <td class="data">191.8</td>
            <td class="data">247.3</td>
            <td class="data">20.9</td>
            <td class="data">74.1</td>
            <td class="data">64.2</td>
            <td class="data">17.2</td>
            <td class="data">8.1</td>
            <td class="data">45.4</td>
            <td class="data">6.1</td>
            <td class="data">19.1</td>
            <td class="data">15.1</td>
        </tr>
        <tr nowrap>
            <td class="dir">Asturias</td>
            <td class="data">87.9</td>
            <td class="data">670.9</td>
            <td class="data">205.2</td>
            <td class="data">305.4</td>
            <td class="data">21.8</td>
            <td class="data">72.1</td>
            <td class="data">52.1</td>
            <td class="data">18.7</td>
            <td class="data">9.9</td>
            <td class="data">33.8</td>
            <td class="data">3.1</td>
            <td class="data">25.9</td>
            <td class="data">7.8</td>
        </tr>
        <tr nowrap bgcolor="#DDDDDD">
            <td class="dir">I.Baleares</td>
            <td class="data">91.3</td>
            <td class="data">530.3</td>
            <td class="data">113.0</td>
            <td class="data">242.7</td>
            <td class="data">17.1</td>
            <td class="data">65.3</td>
            <td class="data">60.3</td>
            <td class="data">16.5</td>
            <td class="data">7.1</td>
            <td class="data">70.5</td>
            <td class="data">4.9</td>
            <td class="data">21.7</td>
            <td class="data">14.5</td>
        </tr>
        <tr nowrap>
            <td class="dir">I.Canarias</td>
            <td class="data">81.0</td>
            <td class="data">472.8</td>
            <td class="data">127.5</td>
            <td class="data">312.8</td>
            <td class="data">18.7</td>
            <td class="data">56.7</td>
            <td class="data">54.4</td>
            <td class="data">17.6</td>
            <td class="data">9.8</td>
            <td class="data">87.3</td>
            <td class="data">4.8</td>
            <td class="data">13.12</td>
            <td class="data">16.12</td>
        </tr>
        <tr nowrap bgcolor="#DDDDDD">
            <td class="dir">Cantabria</td>
            <td class="data">81.0</td>
            <td class="data">528.0</td>
            <td class="data">162.2</td>
            <td class="data">234.9</td>
            <td class="data">23.3</td>
            <td class="data">59.8</td>
            <td class="data">43.5</td>
            <td class="data">15.3</td>
            <td class="data">9.5</td>
            <td class="data">32.9</td>
            <td class="data">2.2</td>
            <td class="data">26.2</td>
            <td class="data">10.3</td>
        </tr>
        <tr nowrap>
            <td class="dir">CyL</td>
            <td class="data">85.8</td>
            <td class="data">845.6</td>
            <td class="data">215.7</td>
            <td class="data">279.0</td>
            <td class="data">20.6</td>
            <td class="data">88.4</td>
            <td class="data">61.1</td>
            <td class="data">14.2</td>
            <td class="data">10.3</td>
            <td class="data">35.6</td>
            <td class="data">5.0</td>
            <td class="data">19.9</td>
            <td class="data">10.7</td>
        </tr>
        <tr nowrap bgcolor="#DDDDDD">
            <td class="dir">CLM</td>
            <td class="data">91.7</td>
            <td class="data">629.1</td>
            <td class="data">178.0</td>
            <td class="data">269.7</td>
            <td class="data">15.2</td>
            <td class="data">77.7</td>
            <td class="data">63.6</td>
            <td class="data">12.6</td>
            <td class="data">8.4</td>
            <td class="data">41.5</td>
            <td class="data">2.9</td>
            <td class="data">15.6</td>
            <td class="data">17.3</td>
        </tr>
        <tr nowrap>
            <td class="dir">Cataluña</td>
            <td class="data">89.2</td>
            <td class="data">579.4</td>
            <td class="data">166.7</td>
            <td class="data">264.5</td>
            <td class="data">18.1</td>
            <td class="data">75.1</td>
            <td class="data">68.7</td>
            <td class="data">14.8</td>
            <td class="data">9.5</td>
            <td class="data">55.4</td>
            <td class="data">4.4</td>
            <td class="data">25.4</td>
            <td class="data">15.5</td>
        </tr>
        <tr nowrap bgcolor="#DDDDDD">
            <td class="dir">C.Valenciana</td>
            <td class="data">85.6</td>
            <td class="data">536.5</td>
            <td class="data">126.2</td>
            <td class="data">247.2</td>
            <td class="data">15.2</td>
            <td class="data">63.4</td>
            <td class="data">57.5</td>
            <td class="data">12.9</td>
            <td class="data">8.1</td>
            <td class="data">62.4</td>
            <td class="data">5.2</td>
            <td class="data">19.2</td>
            <td class="data">21.6</td>
        </tr>
        <tr nowrap>
            <td class="dir">Extremadura</td>
            <td class="data">85.9</td>
            <td class="data">714.3</td>
            <td class="data">162.5</td>
            <td class="data">284.8</td>
            <td class="data">20.8</td>
            <td class="data">68.7</td>
            <td class="data">47.3</td>
            <td class="data">9.5</td>
            <td class="data">9.3</td>
            <td class="data">37.1</td>
            <td class="data">5.8</td>
            <td class="data">13.3</td>
            <td class="data">20.3</td>
        </tr>
        <tr nowrap bgcolor="#DDDDDD">
            <td class="dir">Galicia</td>
            <td class="data">92.3</td>
            <td class="data">789.2</td>
            <td class="data">261.3</td>
            <td class="data">294.7</td>
            <td class="data">24.2</td>
            <td class="data">67.7</td>
            <td class="data">57.2</td>
            <td class="data">17.0</td>
            <td class="data">15.1</td>
            <td class="data">36.9</td>
            <td class="data">5.2</td>
            <td class="data">43.0</td>
            <td class="data">10.0</td>
        </tr>
        <tr nowrap>
            <td class="dir">C.Madrid</td>
            <td class="data">88.4</td>
            <td class="data">639.1</td>
            <td class="data">171.5</td>
            <td class="data">262.0</td>
            <td class="data">15.9</td>
            <td class="data">76.3</td>
            <td class="data">60.5</td>
            <td class="data">15.0</td>
            <td class="data">8.8</td>
            <td class="data">29.71</td>
            <td class="data">4.6</td>
            <td class="data">19.0</td>
            <td class="data">18.0</td>
        </tr>
        <tr nowrap bgcolor="#DDDDDD">
            <td class="dir">R.Murcia</td>
            <td class="data">92.6</td>
            <td class="data">449.9</td>
            <td class="data">136.4</td>
            <td class="data">274.8</td>
            <td class="data">13.6</td>
            <td class="data">52.8</td>
            <td class="data">51.9</td>
            <td class="data">11.3</td>
            <td class="data">6.9</td>
            <td class="data">51.4</td>
            <td class="data">6.0</td>
            <td class="data">18.4</td>
            <td class="data">22.7</td>
        </tr>
        <tr nowrap>
            <td class="dir">Navarra</td>
            <td class="data">82.7</td>
            <td class="data">651.6</td>
            <td class="data">153.5</td>
            <td class="data">242.8</td>
            <td class="data">17.7</td>
            <td class="data">71.4</td>
            <td class="data">60.9</td>
            <td class="data">16.2</td>
            <td class="data">10.2</td>
            <td class="data">27.4</td>
            <td class="data">3.7</td>
            <td class="data">28.6</td>
            <td class="data">12.6</td>
        </tr>
        <tr nowrap bgcolor="#DDDDDD">
            <td class="dir">País Vasco</td>
            <td class="data">84.9</td>
            <td class="data">678.5</td>
            <td class="data">199.0</td>
            <td class="data">276.9</td>
            <td class="data">23.8</td>
            <td class="data">80.6</td>
            <td class="data">57.1</td>
            <td class="data">17.9</td>
            <td class="data">11.5</td>
            <td class="data">27.2</td>
            <td class="data">5.5</td>
            <td class="data">33.2</td>
            <td class="data">9.8</td>
        </tr>
        <tr nowrap>
            <td class="dir">La Rioja</td>
            <td class="data">81.2</td>
            <td class="data">548.4</td>
            <td class="data">163.2</td>
            <td class="data">242.8</td>
            <td class="data">18.7</td>
            <td class="data">63.4</td>
            <td class="data">48.6</td>
            <td class="data">12.5</td>
            <td class="data">6.3</td>
            <td class="data">31.6</td>
            <td class="data">4.3</td>
            <td class="data">15.7</td>
            <td class="data">8.4</td>
        </tr>
    </table>
</div>

预先感谢您提供任何想法。

highcharts background-color
1个回答
0
投票

Highcharts循环默认颜色。您只需要向colors数组添加更多项目:

colors: [...]

默认颜色是:

"#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"

实时演示: https://jsfiddle.net/BlackLabel/7q2dr3am/

API参考: https://api.highcharts.com/highcharts/colors

© www.soinside.com 2019 - 2024. All rights reserved.