Динамическое изменение значений тика, c3js

У меня есть гистограмма в c3js, которая использует тики категории по оси x. Значение клещ я хочу, чтобы отобразить устанавливается при загрузке диаграммы:Динамическое изменение значений тика, c3js

axis: { 
     x: { 
     tick:{ 
      rotate: -35, 
      values: getTicks(displayData), //Return the tick values 
      multiline:false 
     }, 
     type: 'categorized' 
     } 
    }

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

Мне нужно разрешить пользователям динамически обновлять диапазон оси x, не загружая новые данные, и я хочу, чтобы количество отображаемых тиков оставалось неизменным, но с разными значениями.

Чтобы изменить диапазон оси х, я использую эту функцию:

chart.axis.range({min: {x: minRange}, max: {x: maxRange}});

Там нет функции называется chart.axis.values. Любые идеи о том, как динамически менять значения тика?

EDIT - Чтобы быть действительно ясным, я не хочу обновлять значения диаграммы. Это включает в себя значения оси x и y. Я только хочу изменить, какие тики отображаются.

источник

2015-12-06 JasTonAChair

Я изменил значения клеща на оси х, как этот

chart.x([ 50, 60, 170, 230, 300, 350])//set new x axis ticks

Рабочий пример here

EDIT

значения Обновление может быть сделано, как это:

chart.load({ 
     columns: [ 
      ['data1', 100, 250, 150, 200, 100, 350] 
     ] 
    });

Рабочий пример here

Надеюсь, что это поможет!

источник

2015-12-06 11:04:45 Cyril

Спасибо, но это не решает проблему. Чтобы уточнить, я не пытаюсь обновить ось x самостоятельно, я хочу только изменить отображаемые значения. Имеет ли это смысл? – JasTonAChair

Спасибо, Кирилл. Я думаю, что вопрос не должен был быть достаточно ясным, поэтому я сделал редактирование более подробно. – JasTonAChair

Я думаю, что вы поставили снимок экрана, который вы хотите, чтобы значения галочки были в основном значениями по оси x и оси y, но, похоже, вам нужно что-то еще. – Cyril

Что-то вроде этого должно работать.

axis: { 
    x: { 
     type: 'timeseries', 
     tick: { 
      values: function(x) { return customTicks(x) }, 
      format: function(x) { return customFormat(x); }, 
     } 
    } 
}

customTicks() должен возвращать массив дат для этой работы.

function customTicks(x) { 
    start = x[0]; 
    end = x[1]; 
    result = []; 
    for (var i = new Date(start); i <= end; i.setDate(i.getDate() + 1)) { 
     result.push(new Date(i)); 
    } 
    return result; 
}

customFormat() принимает дату и возвращает строку для этой даты. Это дает вам гибкость при настройке формата по мере необходимости.

function customFormat(x) { 
}

Возможно, это не особенно элегантно, но выполняет эту работу. Одним из преимуществ этого подхода является то, что вы можете использовать одни и те же функции на нескольких диаграммах, и все они будут демонстрировать одинаковое поведение всегда.

Проблема № 1 такого подхода заключается в том, что он, кажется, называют customTicks() каждые данные указывают так же, как это делает для customFormat().

Проблема № 2 является то, что она создает много этих ошибок:

d3.v3.min.js: 1 [Нарушение] Добавлен непассивный прослушиватель событий к событию «touchstart» с блокировкой прокрутки. Рассмотрите обработчик событий маркировки как «пассивный», чтобы сделать страницу более отзывчивой. См https://www.chromestatus.com/feature/5745543795965952

Это уже помечена на Stackoverflow в Added non-passive event listener to a scroll-blocking 'touchstart' event

источник

2017-09-27 15:22:34 Vishal

Динамическое изменение значений тика, c3js

ответ

Смежные вопросы