Question

我正在使用高档图表区域。如果可能的话，我想要实现的是当图表最初被绘制为区域部分为一种颜色时。当用户选择其他选项时，绘制的线条将以另一种颜色显示。我已经尝试使用highcharts主题，我也设置了highcharts setOptions。我也试过了plotOptions。单击时，它正常工作将附加行添加为黑色。但是再次点击它会添加另一行但是灰色。当有很多线条时，灰色灰色可以看到。

附件是图表 enter image description here

的样子

这是我的代码：`Highcharts.setOptions（{ 颜色：['＃778899'，'＃000000'] }）;

$(selector).highcharts('StockChart', {


    chart: {
        height: 600,
        borderRadius: 0
    },
    credits: { 'enabled': false },
    legend: {
        enabled: true,
        borderRadius: 1,
        borderWidth: 0,
        itemStyle: {
            fontSize: '11px'                
        },
        itemHiddenStyle: {
            color: '#999999'
        }
    } 



    plotOptions: {
        series: { lineWidth: 1 },
    area:{colors:['#000000']}
    }

}）;`

Answer 1

您只定义了两种颜色：＃778899'，'＃000000'。因此，当您添加第3行时，它是灰色的，第4行是黑色，依此类推。 4行示例：http://jsfiddle.net/dpb3vcy0/1/

$(function () {
    // Create the chart
    Highcharts.setOptions({
        colors: ['#778899', '#000000']
    });

    $('#container').highcharts('StockChart', {

        rangeSelector: {
            inputEnabled: $('#container').width() > 480,
            selected: 1
        },

        series: [{
            name: 'nr 1',
            data: [5, 1, 1],
            type: 'area',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            }
        }, {
            name: 'nr 2',
            data: [0, 0, 5, 5],
            type: 'area',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            }
        }, {
            name: 'nr 3',
            data: [0, 0, 0, 2, 2, 7],
            type: 'area',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            }
        }, {
            name: 'nr 4',
            data: [0, 0, 0, 0, 0, 1, 1, 4],
            type: 'area',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            }
        }]
    });
});

高图表区域填充

1 个答案: