Question

我在Highcharts中有以下图表，我想限制yAxis上显示的项目数量，例如7个项目，这些项目始终显示变量categories的第一项和最后一项。 / p>

$(function () {

var categories = ["Pos 01", "Pos 02", "Pos 03", "Pos 04", "Pos 05", "Pos 06", "Pos 07", "Pos 08", "Pos 09", "Pos 10", "Pos 11", "Pos 12", "Pos 13", "Pos 14", "Pos 15", "Pos 16", "Pos 17"];

var plan = [{x: 1534095420000, y:15},{x:1534097580000, y:14},{x:1534099020000,y:13},{x:1534119900000,y:12},{x:1534149780000,y:11},{x:1534174620000,y:10},{x:1534176420000,y:9},{x:1534189020000,y:8},{x:1534313940000,y:7},{x:1534317900000,y:6},{x:1534337700000,y:5},{x:1534373880000,y:4},{x:1534374120000,y:3},{x:1534375560000,y:2},
{x:1534377720000,y:1},{x:1534378200000,y:0},{x:1534378200000,y:0},{x:1534414200000,y:0},{x:1534414620000,y:1}];

var series =[{
                name: "Plan",
                id: "plan",
                data: plan
            }];
            
          
  // Create the chart
  window.chart = new Highcharts.Chart('container',{
                colors: ["#7cb5ec"],
                chart: {
                    type: "spline",
                },
                exporting: {
                    enabled: false
                },
                title: {
                    text: 'Graphic'
                },
                yAxis: {
                    categories: categories,
                    title: {
                        text: 'Position'
                    },
                    labels: {
                        format: '{value}'
                    },
                },
                xAxis: {
                    title: {
                        text: 'Date'
                    },
                    type: 'datetime',
                    tickInterval: 3600000,
                },
                plotOptions: {
                    spline: {
                        findNearestPointBy: 'xy',
                        marker: {
                            enabled: true
                        }
                    }
                },
                tooltip: {
                    split: false,
                    useHTML: true,
                    style: {
                        pointerEvents: 'all'
                    },
                    formatter: function () {
                        return this.series.yAxis.categories[this.point.y];
                    }
                },
                "series": series
            });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 600px; min-width: 500px"></div>

Answer 1

取决于几件事，它可以通过多种方式完成： -您拥有什么数据， -您想要多少个滴答声， -您是否要在刻度之间或刻度之间显示标签， -如果多个类别不能被多个刻度所除，那么您要如何显示标签， -是否希望刻度线之间有相等的间隔。

我们可以使用格式化程序功能，类别，tickAmount属性，yAxis.max属性以及许多其他功能。但是在大多数情况下，我们将不得不放弃嘲笑地设置类别。

示例之一：

我设置了yAxis.max

chart: {
  type: "spline",
  events: {
    load: function() {
      var chart = this,
        max = chart.series[0].dataMax;

      chart.update({
        yAxis: {
            max: max
        }
      });
    }
  }
},

我将tickAmount设置为6，并使用了格式化程序功能

yAxis: {
  //categories: categories,
  title: {
    text: 'Position'
  },
  tickAmount: 6,
  labels: {
    formatter: function() {
        var value = this.value + 1;
                if (this.value < 9) {
        return 'Pos 0' + value;
      } else {
        return 'Pos ' + value;
      }
    }
  }
},

我格式化了工具提示：

tooltip: {
  split: false,
  useHTML: true,
  style: {
    pointerEvents: 'all'
  },
  formatter: function() {
    var y = this.y + 1;
    if (y < 10) {
      return 'Pos 0' + y;
    } else {
      return 'Pos ' + y;
    }
  }
},

js Fiddle

我知道最后一个记号不是类别数组的最后一个元素，但是“编辑”您的数据并处理适当的数据比尝试使这些记号适应您奇怪的类别数组和不包含这些数据的数据要容易得多。适合类别。

高图限制了将在yAxis上的类别中显示的项目数量

1 个答案: