2017-01-20 11 views
0

ChartКак пропускать метки по осям x?

Я уже давно пытаюсь выяснить, как пропускать метки по оси x этой диаграммы. Так, например, отобразите каждую третью или четвертую метку. Я попытался добавить autoSkip и stepSize в настройку tick, но ничего не меняется. Есть ли простой способ сделать это?

Edit:

visitorsLabels = ["januar", "desember", "november", "oktober", "september", "august", "juli", "juni", "mai", "april", "mars", "februar"] 

var visitors_data = [2, 4, 2, 1, 2, 4, 2, 1, 2, 4, 2, 1]; 

var ctx1 = $("#chart-visitors"); 

var graph_visitors_preset = { 
    labels: visitorsLabels, 
    datasets: [ 
     { 
      fill: true, 
      lineTension: 0.1, 
      backgroundColor: "#f9f9f9", 
      borderColor: "#72bce3", 
      borderCapStyle: 'butt', 
      borderDash: [], 
      borderDashOffset: 0.0, 
      borderJoinStyle: 'miter', 
      pointBorderColor: "rgba(75,192,192,1)", 
      pointBackgroundColor: "#fff", 
      pointBorderWidth: 1, 
      pointHoverRadius: 5, 
      pointHoverBackgroundColor: "rgba(75,192,192,1)", 
      pointHoverBorderColor: "rgba(220,220,220,1)", 
      pointHoverBorderWidth: 2, 
      pointRadius: 1, 
      pointHitRadius: 10, 
      data: visitors_data, 
      spanGaps: true, 
     } 
    ] 
}; 
var chart_visitors = new Chart(ctx1, { 
    type: 'line', 
    data: graph_visitors_preset, 
    options: { 
     responsive: true, 
     legend: { display: false }, 
     scales: { 
      xAxes: [{ 

       ticks: {autoSkip: true, stepSize: 3, max: 5, min: 2}, 
       gridLines: { 
        display: false 
       } 
      }], 
      yAxes: [{ 

       gridLines: { 
        display: false 
       } 
      }] 
     } 
    } 
}); 
+0

бы помочь, если вы включили код для диаграммы :) – cbll

+0

я ценю это. Код добавлен :) – Pelle

ответ

1

В параметрах диаграммы вы можете изменить функцию обратного вызова топора в тиках, чтобы отобразить клещ (наклейка) на основе значения, или даже изменить то, что он показывает:

options: { 
    scales: { 
     xAxes: [{ 
      ticks: { 
       callback: function(tick, index, array) { 
        return (index % 3) ? "" : tick; 
       } 
      } 
     }] 
    } 
} 

Эта опция в основном отображает по одному тику каждые три.


Вы можете проверить полный сценарий в this jsfiddle, а вот его результат:

enter image description here

+0

Это был очень аккуратный способ сделать это. Я не знал, что все так просто. Спасибо! – Pelle

+0

Я знаю, что я уже отметил это как решение, но у меня есть очень важный вопрос. Почему невозможно просмотреть две одинаковые метки по осям x без их перекрытия и уничтожения диаграммы. Если, например, я продолжаю график со всеми месяцами в два года (так что каждый месяц отображается дважды на графике), половина ярлыков смещается, а половина из них исчезает в конце. Это можно как-то исправить? – Pelle

+0

@Pelle Хмм, я никогда не видел такой ошибки, и [не мог воспроизвести его] (https://jsfiddle.net/q9jst5ar/2/). Не могли бы вы воспроизвести его в скрипке? Так что я могу проверить, что не так, и попытаться получить исправление. – tektiv