时间戳

首页 > 解决方案 > highcharts 如何使用 yAxis 上的类别使 x 和 y 轴从同一个零开始

highcharts - highcharts 如何使用 yAxis 上的类别使 x 和 y 轴从同一个零开始

问题描述

晚上好，我正在使用 highcharts，这是我的实际情况`

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: "One might think points get grouped by name"
        },
            "series": [{
            "data": [{
                x: 1,
                "name": "May",
                    "y": 1
            }],
                "name": "Alpha"
        }, {
            "data": [{
                x: 0,
                "name": "Apr",
                    "y": 1
            }, {
                x: 1,
                "name": "May",
                    "y": 2
            }, {
                x: 2,
                "name": "Jun",
                    "y": 3
            }],
                "name": "Beta"
        }],
        xAxis: {
            type: 'category',

            //categories : ["Jun", "Apr", "May"]
        },
        yAxis: {
            type: 'category',

            categories : ["First", "Second", "Third", "fourth","fifth"]
        }
    });
});

` . 正如您从小提琴中看到的那样，y 轴与 x 轴分离，但如果我评论从 37 到 41 的行，我会得到我想要的。有没有办法让 x 和 y 轴从同一点开始并继续使用类别？

标签： highchartsaxis

解决方案

您不必对 yAxis 进行分类 - 您可以使用 yAxis.labels.formatter 函数显示正确的 yAxis 标签：

var yAxisCategories = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth']
yAxis: {
 labels: {
   formatter() {
     return yAxisCategories[this.pos]
   }
 }
},

带有格式化程序的 jsFiddle

如果您想坚持使用分类的 yAxis，您可以使用 xAxis.offset 属性和 yAxis.tickmarkPlacement 'on' 属性手动将 xAxis 移近它们的 yAxis 0 值。在这个例子中，我硬性地放了-34px，但是你可以在chart.load事件中计算出合适的值，然后更新计算出的偏移量。

xAxis: {
  type: 'category',
  offset: -34
},

yAxis: {
  type: 'category',
  categories: ["First", "Second", "Third", "fourth", "fifth"],
  tickmarkPlacement: 'on'
},

带有偏移量的 jsFiddle

如果您想尝试不同的方法，请告诉我 - 我将编辑我的答案。

API 参考：

 https://api.highcharts.com/highcharts/yAxis.labels.formatter
 https://api.highcharts.com/highcharts/yAxis.tickmarkPlacement
 https://api.highcharts.com/highcharts/xAxis.offset

推荐阅读