Question

我必须在区域图中为阴影区域和线条设置单独的颜色。我怎么能用Highcharts做到这一点。

以下是示例

Answer 1

按照以下代码：

在您的javascript中设置以下代码并更改您想要的颜色......

fillColor : {
   linearGradient : {x1: 0, y1: 0, x2: 0, y2: 1},
   stops : [ [0, '#2a2a2b'], [1, '#3e3e40']],
}

以下颜色分配给行

[0，'＃2a2a2b']

而

[1，'＃3e3e40']

上面一个是阴影区域

我相信这会对你有所帮助......你只需要添加这段代码并更改你喜欢的颜色代码......

...谢谢

Answer 2

你需要的是具有黑暗主题选项的Highcharts的areaspline属性。

这是一个例子;

$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {

    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'USD to EUR exchange rate over time'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                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')]
                    ]
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },

        series: [{
            type: 'area',
            name: 'USD to EUR',
            data: data
        }]
    });
});

this jsFiddle是以上示例的实时形式。

这里重要的是;

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.5/themes/dark-unica.js"></script>

线;它为图表提供了黑暗主题。

HIGHCHARTS如何为阴影区域和区域图中的线条制作单独的颜色

2 个答案: