如何更改高圖表中圖表區域的背景顏色？

Question

我正在使用 Highcharts JS。 我想更改線條的顏色、線條下方區域的點和背景顏色。

我嘗試了很多方法，但都沒有奏效。 我在 JsFiddle 上創建了一個項目，以便您可以查看代碼並更改它，如果您有解決方案可以幫助我解決這個問題。

JSFiddle 上的示例：

使用 highcharts 的折線圖

我的代碼：

var chart = new Highcharts.Chart({

            chart: {
                renderTo: 'charts',
                type: 'area',
                backgroundColor: '#4b0e26',
                style: {
                    fontFamily: 'CairoFont',
                    color: "#ffffff",
                }
            },

            xAxis: {
                categories: [
                    'يناير',
                    'فبراير',
                    'مارس',
                    'إبريل',
                    'مايو',
                    'يوليو',
                    'يونيو',
                    'أغسطس',
                    'سبتمبر',
                    'أكتوبر',
                    'نوفمبر',
                    'ديسمبر',
                ],
                reversed: true,
                lineColor: '#fff',
                tickColor: '#fff',
                labels: {
                    style: {
                        color: '#fff',
                        fontFamily: 'CairoFont'
                    }
                },
            },

            yAxis: {
                title: {
                    text: false,
                    useHTML: Highcharts.hasBidiBug,

                },
                opposite: true,
                lineColor: '#fff',
                tickColor: '#fff',
                labels: {
                    style: {
                        color: '#fff',
                        fontFamily: 'CairoFont'
                    }
                },
            },

            title: {
                text: 'الطلاب الجدد',
                useHTML: Highcharts.hasBidiBug,
                style:{
                    color: '#fff',
                }
            },

            legend: {
                enabled: false
            },

            tooltip: {
                useHTML: true,
                backgroundColor: '#FCFFC5',
                borderColor: 'black',
                borderRadius: 10,
                borderWidth: 3,

            },
            credits: {
                enabled: false
            },
            series: [{
                showInLegend: false,
                data: [
                    [0, 29.9],
                    [1, 71.5],
                    [3, 106.4],
                    [4, 300.4],
                    [5, 400.4],
                    [6, 20.4],
                    [7, 40.4],
                    [8, 120.4],
                    [9, 50.4],
                    [10, 230.4],
                    [11, 110.4],
                    [12, 500.4],
                ],

            }]

        });

Answer 1

如果你想調整這個系列的顏色，你可以使用https://api.highcharts.com/highcharts/plotOptions.series.color 。 因此，您只需將系列設置為：

series: [{
    showInLegend: false,
    data: [
        [0, 29.9],
        [1, 71.5],
        [3, 106.4],
        [4, 300.4],
        [5, 400.4],
        [6, 20.4],
        [7, 40.4],
        [8, 120.4],
        [9, 50.4],
        [10, 230.4],
        [11, 110.4],
        [12, 500.4],
    ],
    color: '#ff0000'
}]

在https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-color-specific/從他們的文檔或https://jsfiddle查看工作演示.net/pkcrt5q2/為您的具體示例。

---

此外，您可以將其設置為全局選項，如https://api.highcharts.com/highcharts/colors 中所述。

Highcharts.setOptions({
    colors: ['#ff0000']
});

工作演示： https : //jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/colors/