Highcharts，随着时间的推移绘制降水类型，体积和强度

Question

我有一个自动气象站，可收集四种不同类型的降水数据：

1. 降水事件的开/关
2. 随时间段的总体积，单位为mm
3. 强度mm /小时和
4. 降水型

即：

0              No precipitation
40             Precipitation present
51             Light drizzle
52             Moderate drizzle
53             Heavy drizzle

堆积条形可以通过降水类型随时间管理体积。

我想按时间按类型绘制强度图。我认为根据类型改变标记颜色就是对此的回答。请问有更好的解决方案吗？

Answer 1

基于您的要求的一个建议可能是使用双轴的组合条形图和折线图（如GrzegorzBlachliński所提到的）。

如您所述，堆叠条形图有助于显示每种降水类型的比较体积。然后，您可以叠加线条以显示每种类型的强度。

我建议选择用户可以轻松与每种降水类型相关的颜色，尤其是两种图表类型之间的颜色。

这是我根据Highcharts网站上的一个演示图表编写的粗略草稿：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Precipitation'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: [{
            min: 0,
            title: {
                text: 'Preipitation volume (mm)'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },{
            min: 0,
            title: {
                text: 'Preipitation intensity (mm/hr)'
            },
            opposite: true
        }],
        legend: {
            //align: 'bottom',
            //x: -30,
            //verticalAlign: 'bottom',
            //y: 25,
            //floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'rain',
            data: [5, 3, 4, 7, 2],
            color: '#b3b3ff'
        }, {
            name: 'sleet',
            data: [2, 2, 3, 2, 1],
            color: '#d9b3ff'
        }, {
            name: 'snow',
            data: [3, 4, 4, 2, 5],
            color: '#c2c2f0'
        },{
            name: 'rain intensity',
            data: [5, 3, 4, 7, 2],
            color: 'blue',
            type: 'line',
            yAxis: 1
        }, {
            name: 'sleet intensity',
            data: [2, 2, 3, 2, 1],
            color: 'purple',
            type: 'line',
            yAxis: 1
        }, {
            name: 'snow intensity',
            data: [3, 4, 4, 2, 5],
            color: 'indigo',
            type: 'line',
            yAxis: 1
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

如果您愿意，也欢迎您在我在此处创建的小提琴中使用此代码进行操作：http://jsfiddle.net/brightmatrix/kbk53n43/

我希望这对你有所帮助。