Фиксированная сетка в chartist.js

257
11 февраля 2020, 22:40

Фиксированную сетку задаю вот так:

let options = { 
  width: 500, 
  height: 200, 
  high: 10000, 
  low: 0, 
  divisor: 100, 
  axisX: { 
    ticks: [1, 4, 8, 12, 16], 
    showGrid: true, 
    showLabel: true 
  }, 
  axisY: { 
    showGrid: true, 
    showLabel: true, 
    onlyInteger: true 
  } 
}; 
let data = { 
  labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], 
  series: [ 
    [506, 43, 543, 324, 454, 56, 453, 5657, 343, 453, 434, 568, 921, 343, 553, 435] 
  ] 
}; 
 
new Chartist.Line('.ct-chart', data, options);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.js"></script> 
<div class="ct-chart"></div>

По вертикальной оси Y все в порядке, но когда начинает рисоваться график, то по оси X на каждую точку рисуется линия сетки вот так:

Вопрос: как сделать чтобы не на каждую точку рисовалась сетка, а например, одна вертикальная полоса сетки на каждые 4 точки?

Answer 1

Вот так можно:

let options = {
  axisX: {
    labelInterpolationFnc: function(value, index) {
      return index % 4 === 0 ? value : null;
    }
  }
};

let options = { 
  width: 500, 
  height: 200, 
  high: 10000, 
  low: 0, 
  divisor: 100, 
  axisX: { 
    labelInterpolationFnc: function(value, index) { 
      return index % 4 === 0 ? value : null; 
    }, 
    ticks: [1, 4, 8, 12, 16], 
    showGrid: true, 
    showLabel: true 
  }, 
  axisY: { 
    showGrid: true, 
    showLabel: true, 
    onlyInteger: true 
  } 
}; 
let data = { 
  labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], 
  series: [ 
    [506, 43, 543, 324, 454, 56, 453, 5657, 343, 453, 434, 568, 921, 343, 553, 435] 
  ] 
}; 
 
new Chartist.Line('.ct-chart', data, options);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.js"></script> 
<div class="ct-chart"></div>

найдено в примерах

READ ALSO
Загрузка файла без клика ajax

Загрузка файла без клика ajax

Есть js скрипт который загружает выбранный файл по клику на #uploadImage

253
выезжающее меню справа на чистом CSS

выезжающее меню справа на чистом CSS

У меня краткий вопрос, почему когда боковое меню слева выезжает по нажатию на гамбургер нормально, но когда, меню справа, то при нажатии на гамбургер...

268
const в начале и const в конце

const в начале и const в конце

Обясните пожалуйста для чего делаеться const в начале и const в конце, и в чем вообще разница?

268
Перерисовка полей ввода параметров

Перерисовка полей ввода параметров

Есть счётная программа, в которой используется несколько методов, выбор метода реализован с помощью comboBox:

246