Плагин Chart js -plugin-zoom не меняет метки оси x - PullRequest
Новая
       45

Плагин Chart js -plugin-zoom не меняет метки оси x

0 голосов
/ 05 августа 2020

Я работаю с диаграммой. js модуль для построения некоторых данных и я использую диаграмму js -plugin-zoom, чтобы включить масштабирование и панорамирование, однако, хотя масштабирование работает с метками на оси x не изменится ни по какой причине. Я встречал похожие вопросы, но все они касались данных временных рядов, и поэтому совет оказался бесполезным.

Вот график в уменьшенном масштабе:

zoomed out plot

and here is it zoomed in:

увеличенный сюжет

Ключевой момент, на который следует обратить внимание, - это то, как метки на оси y изменились, но метки оси x не изменились. Вот соответствующая переменная конфигурации диаграммы: 

const config3 = {
                        
                        type: 'line',
                        data: {
                            labels: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
                            datasets: [
                            
                            {
                                label: "",
                                backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16),
                                borderColor: '#0071BC',
                                data: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
                                fill: false,
                                borderWidth: 1,
                            },

                            ],
                        },
                        options: {
                            responsive: true,
                            title: {
                                display: true,
                                text: 'Peak: -1.2188'
                            },
                            tooltips: {
                                mode: 'index',
                                intersect: false,
                            },
                            hover: {
                                mode: 'nearest',
                                intersect: true
                            },
                            scales: {
                                xAxes: [{
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Frequency (Hz)'
                                    },
                                    ticks:{
                                        autoSkip: true,
                                        maxTicksLimit: 20
                                    },
                                }],
                                yAxes: [{
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Amplitude'
                                    }
                                }],
           
                            },
                            plugins:{
                                zoom: {
                                    pan: {
                                        enabled: true,
                                        mode: 'xy',
                                        speed: 20,
                                        threshold: 10,
                                    },
                                    zoom: {
                                        enabled: true,
                                        drag: false,
                                        mode: "xy",
                                        speed: 0.1,
                                        // sensitivity: 0.1,
                                    }
                                }
                            },
                            elements: {
                                point:{
                                    radius: 0
                                }
                            }
                        }
                    };

При необходимости я могу предоставить больше кода, но я полагаю, что ошибка, вероятно, содержится в конфигурации. Я попытался изменить zoom.mode на 'x', но это не сработало.

1 Ответ

0 голосов
/ 05 августа 2020

В случае, если кто-то еще придет к этому, я нашел решение, которое довольно неинтуитивно.

Первая проблема заключается в том, как метки обрабатываются в диаграмме. js и потому что они рассматриваются как категории не x данные, как я думал. Поэтому сначала вы должны передать свои данные в виде координат в следующем формате: (как показано в этой документации: https://www.chartjs.org/docs/latest/charts/line.html) 

data: [{
    x: 10,
    y: 20
}, {
    x: 15,
    y: 10
}]

И удалить переменную меток.

Однако это не будет работать с линейными диаграммами, несмотря на то, что говорится в документации. Чтобы обойти это, вы можете установить: type: 'scatter' и внутри набора данных написать showLine: true Это сгенерирует линейный график, где метки x создаются автоматически, и масштабирование будет работать отлично.

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

...