Highcharts 如何在highstock中获取热图图表的垂直滚动条_Highcharts

Highcharts 如何在highstock中获取热图图表的垂直滚动条

highcharts

Highcharts 如何在highstock中获取热图图表的垂直滚动条,highcharts,Highcharts,对于热图图表，我可以得到水平滚动条，现在我需要垂直滚动条，类似于下面链接中显示的图表下面是我的示例代码： <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script> <script type="text/javascript" src="http://code.highcharts.com/stoc

对于热图图表，我可以得到水平滚动条，现在我需要垂直滚动条，类似于下面链接中显示的图表

下面是我的示例代码：

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>

<div id="container" style="height: 300px"></div>
<script>


$(function () {

    $('#container').highcharts({

        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 40
        },


        title: {
            text: 'Sales per employee per weekday'
        },

        xAxis: {
            categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'],
            min:2
        },

        yAxis: {
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            title: null,


        },
scrollbar: {
        enabled: true
    },

        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 320
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        },

        series: [{
            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'
                }
            }
        }]

    });
});
</script>
</body>
<html>


$（函数（）{
$（“#容器”）。高图({
图表：{
类型：'热图'，
玛金托普：40，
marginBottom:40
},
标题：{
文本：“每个员工每个工作日的销售额”
},
xAxis：{
类别：[“亚历山大”、“玛丽”、“马克西米兰”、“索菲亚”、“卢卡斯”、“玛丽亚”、“利昂”、“安娜”、“蒂姆”、“劳拉”]，
最小：2
},
亚克斯：{
类别：[‘星期一’、‘星期二’、‘星期三’、‘星期四’、‘星期五’]，
标题：空，
},
滚动条：{
已启用：true
},
颜色轴：{
分:0,，
minColor:“#FFFFFF”，
maxColor:Highcharts.getOptions（）.Color[0]
},
图例：{
对齐：“右”，
布局：“垂直”，
保证金：0，
垂直排列：“顶部”，
y:25，
符号高度：320
},
工具提示：{
格式化程序：函数（）{
返回''+this.series.xAxis.categories[this.point.x]+'已售出
'+
this.point.value+'this.series.yAxis.categories[this.point.y]+''上的项目；
}
},
系列：[{
名称：“每位员工的销售额”，
边框宽度：1，
数据：[[0,0 0 0 0,0 0 0 0,10 10 10，[0,0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，10 0 0 0 0 0,67，[1,0 0 0 0 0 0 0,0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0,0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，10 5 5 5 5 5 5 5 5 5 5 5 5 7 7 7 7 7 7 7 7，[0 0 0，0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，4,4,4 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7，[0 0 0 0 0 0 0，0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7[5,3,6]，[5,4120]，[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]],
数据标签：{
启用：对，
颜色：'黑色'，
风格：{
textShadow:“无”
}
}
}]
});
});

在yaxis

滚动条中应用滚动属性true:{enabled:true}

和在图表对象中添加缩放类型：“xy”

var图表=新的Highcharts.图表({
图表：{
类型：'热图'，
玛金托普：40，
marginBottom:40，
renderTo:'容器'，
zoomType:'xy'
},
标题：{
文本：“每个员工每个工作日的销售额”
},
xAxis：{
类别：[“亚历山大”、“玛丽”、“马克西米兰”、“索菲亚”、“卢卡斯”、“玛丽亚”、“利昂”、“安娜”、“蒂姆”、“劳拉”]，
最小：2
},
亚克斯：{
类别：[‘星期一’、‘星期二’、‘星期三’、‘星期四’、‘星期五’]，
标题：空，
滚动条：{
已启用：true
}
},
滚动条：{
已启用：true
},
颜色轴：{
分:0,，
minColor:“#FFFFFF”，
maxColor:Highcharts.getOptions（）.Color[0]
},
图例：{
对齐：“右”，
布局：“垂直”，
保证金：0，
垂直排列：“顶部”，
y:25，
符号高度：320
},
工具提示：{
格式化程序：函数（）{
返回''+this.series.xAxis.categories[this.point.x]+'已售出
'+
this.point.value+'this.series.yAxis.categories[this.point.y]+''上的项目；
}
},
系列：[{
名称：“每位员工的销售额”，
边框宽度：1，
数据：[[0,0 0 0 0,0 0 0 0,10 10 10，[0,0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，10 0 0 0 0 0,67，[1,0 0 0 0 0 0 0,0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0,0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，10 5 5 5 5 5 5 5 5 5 5 5 5 7 7 7 7 7 7 7 7，[0 0 0，0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，4,4,4 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7，[0 0 0 0 0 0 0，0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7[5,3,6]，[5,4120]，[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]],
数据标签：{
启用：对，
颜色：'黑色'，
风格：{
textShadow:“无”
}
}
}]
});

希望它能帮助你

你太棒了，索拉布。这对我有用。我们还需要将min属性添加到y轴。像这样的事情：5分钟。

 var chart = new Highcharts.Chart({

        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 40,
            renderTo: 'container',
            zoomType: 'xy'
        },


        title: {
            text: 'Sales per employee per weekday'
        },

        xAxis: {
            categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'],
            min:2
        },

        yAxis: {
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            title: null,
            scrollbar: {
             enabled: true
           }


        },
       scrollbar: {
        enabled: true
       },

        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 320
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        },

        series: [{
            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'
                }
            }
        }]

    });