highcharts：如何更改上方图表的颜色？

Question

例如，我想变成红色。

我该怎么做？

Answer 1

我认为，针对这种情况的最佳解决方案是使用polygon系列。

代码：

{
    type: 'polygon',
    enableMouseTracking: false,
    showInLegend: false,
    color: 'red',
    data: [
      [16, 10],
      [0, 10],
      [0, 1],
      [8, 9],
      [10, 3],
      [11, 2],
      [13, 6],
      [14, 3],
      [15, 1],
      [16, 1]
    ],
    states: {
      inactive: {
        opacity: 1
      }
    },
  }

演示：https://jsfiddle.net/BlackLabel/pg6u4dns/

API：https://api.highcharts.com/highcharts/series.polygon

重要-请记住在HTML文档中包含highcharts-more模块。

Answer 2

为什么对我不起作用？我想占用所有空间。也就是说，红色，请坚持到顶部。

演示：https://jsfiddle.net/6tg4rnjp/

{
        yAxis: [{
            visible: false,
            gridLineWidth: 0,
            title: {
                text: ''
            },
            labels: {
                enabled: false
            },
            height: '50%',
            lineWidth: 2,
        }, {
            visible: false,
            gridLineWidth: 0,
            labels: {
                enabled: false
            },
            title: {
                text: ''
            },
            top: '50%',
            height: '50%',
            offset: 0,
            lineWidth: 2
        }],
        series: [{
            type: 'line',
            showInLegend: false,
            color: '#00B1FC',
            data: [50, 15, 8, 25, 84, 74, 26, 54, 29, 35, 9, 15, 17, 18, 54, 26, 34, 27, 26, 18, 57, 24, 35, 16, 24, 25, 27],
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: false
                    },
                    inactive: {
                        opacity: 1
                    }
                }
            },
            states: { hover: 'none' },
            fillColor: '#F7F8FA'
        }, {
            type: 'polygon',
            enableMouseTracking: false,
            showInLegend: false,
            color: 'red',
            data: [
                [16, 10],
                [0, 10],
                [0, 1],
                [8, 9],
                [10, 3],
                [11, 2],
                [13, 6],
                [14, 3],
                [15, 1],
                [16, 1]
            ],
            states: {
                inactive: {
                    opacity: 1
                }
            },
        }, {
            type: 'column',
            color: '#94E3FD',
            pointWidth: 1,
            showInLegend: false,
            marker: {
                enabled: true,
                states: {
                    hover: {
                        enabled: true
                    },
                    inactive: {
                        opacity: 1
                    }
                }
            },
            data: [50, 15, 8, 25, 84, 74, 26, 54, 29, 35, 9, 15, 17, 18, 54, 26, 34, 27, 26, 18, 57, 24, 35, 16, 24, 25, 27],
            yAxis: 1,
            states: { hover: 'none' }
        }],
        chart: {
            backgroundColor: '#F4F7FA',
            margin: [0, -5, 0, -5]
        },
        title: {
            text: ''
        },
        tooltip: {
            enabled: false
        },
        xAxis: {
            labels: {
                enabled: false
            },
            visible: false
        },
        exporting: {
            enabled: true
        },
        credits: {
            enabled: false
        },
        navigation: {
            buttonOptions: {
                enabled: false
            }
        }
    }