2

Possuo o seguinte gráfico no Highcharts, queria limitar a quantidade de itens que serão exibidos no eixo Y, por exemplo em 7 itens, sendo que sempre irá mostrar o primeiro e ultimo item da variável categorias.

JSFiddle

$(function () {

var categorias = ["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 planejado = [{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: "Planejado",
                id: "planejado",
                data: planejado
            }];
            
          
  // Create the chart
  window.chart = new Highcharts.Chart('container',{
                colors: ["#7cb5ec"],
                chart: {
                    type: "spline",
                },
                exporting: {
                    enabled: false
                },
                title: {
                    text: 'Gráfico'
                },
                yAxis: {
                    categories: categorias,
                    title: {
                        text: 'Posição'
                    },
                    labels: {
                        format: '{value}'
                    },
                },
                xAxis: {
                    title: {
                        text: 'Tempo'
                    },
                    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: 400px; min-width: 500px"></div>

1 Resposta 1

0

O Highcharts possui as propriedades de valor mínimo e máximo do eixo, vê documentação

yAxis: {min: 0, max: 100}

...sendo que sempre irá mostrar o primeiro e ultimo item da variável categorias.

Para o quesito a cima eu optei por criar outro array contendo a regra mencionada.

$(function() {

  var categorias = ["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 categories = categorias.slice(0, 6);
  categories.push(categorias.slice(-1)[0])

  var planejado = [{
      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: "Planejado",
    id: "planejado",
    data: planejado
  }];


  // Create the chart
  window.chart = new Highcharts.Chart('container', {
    colors: ["#7cb5ec"],
    chart: {
      type: "spline",
    },
    exporting: {
      enabled: false
    },
    title: {
      text: 'Gráfico'
    },
    yAxis: {
      categories: categories,
      title: {
        text: 'Posição'
      },
      labels: {
        format: '{value}'
      },
      max: 6,
      min: 0
    },
    xAxis: {
      title: {
        text: 'Tempo'
      },
      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: 400px; min-width: 500px"></div>

1
  • Dessa maneira não me atende, se você verificar no meu exemplo os pontos ainda aparecem, mesmo que não estejam no eixo y. 26/09/2018 às 2:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .