是否可以在高图中的热图上绘制时间序列？

Question

我有一个highcharts热图，并希望在热图上方绘制几个线序列/样条曲线。这可能吗？

Answer 1

你可以比你提出的问题更快地尝试过。

它工作得很好，不需要覆盖图或使用其他技巧。只需将每个系列配置为合适的类型：

series: [{
        type: 'heatmap',
        name: 'Sales per employee',
        borderWidth: 1,
        data: [[0,0,10],[0,1,19],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115],[5,0,88],[5,1,32],[5,2,12],[5,3,6],[5,4,120],[6,0,13],[6,1,44],[6,2,88],[6,3,98],[6,4,96],[7,0,31],[7,1,1],[7,2,82],[7,3,32],[7,4,30],[8,0,85],[8,1,97],[8,2,123],[8,3,64],[8,4,84],[9,0,47],[9,1,114],[9,2,31],[9,3,48],[9,4,91]],
        dataLabels: {
            enabled: true,
            color: 'black',
            style: {
                textShadow: 'none',
                HcTextStroke: null
            }
        }
    },
   {
        type: 'line',
        name: 'line',
        data: [3, 2.67, 3, 1.33, 1.33, 3.2, 1.6, 2.5, 1.4, 0.2],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        },
   },
   {
        type: 'spline',
        name: 'spline',
        data: [3.5, 1.67, 2, 0.33, 3.33, 1.2, 2.6, 0.5, 2.4, 1.2],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[1],
            fillColor: 'blue'
        }
    }]

产地：

小提琴here。

Answer 2

当然，只需使用CSS定位来覆盖两个图表，一个是热图，一个是线。显然，最上面的一个需要将图表背景颜色设置为透明。