Диаграмма js фиксированный диапазон по оси X и пользовательские метки - PullRequest
Новая
       37

Диаграмма js фиксированный диапазон по оси X и пользовательские метки

0 голосов
/ 04 мая 2020

Я пытаюсь создать точечный график с помощью диаграммы js. Я хочу, чтобы несколько наборов данных были сосредоточены вокруг одного значения X и трех значений Y. Когда я не могу установить пользовательские метки X для своего набора данных, а также не могу установить фиксированный диапазон для осей X.

Вот как я генерирую данные: 

     function generateData(n, xCenter, yCenter) {
            var data = [];
            var spread = 0.2
            for (var i = 0; i < n; i++) {
            data.push({
                    x: (Math.random() - 0.5)*spread + xCenter,
                    y: (Math.random() - 0.5)*spread + yCenter
            })
            }
            return data
            } 
            var scatterChartData = {
            datasets: [
                {
            label: 'My First dataset',
                    backgroundColor: "#0000FF",
                    data: generateData(100, 1, 2)
            }, 
            {
            label: 'My Second dataset',
                    backgroundColor: "#00FF00",
                    data: generateData(50, 1, 3)
            },
            {
            label: 'My Second dataset',
                    backgroundColor: "#00FF00",
                    data: generateData(50, 1, 4)
            },
            ]
            }

Вот параметры разброса: 

var scatterOptions = {
            tooltips: {
            enabled: true
            },
                    responsive: true, // Instruct chart js to respond nicely.
                    maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height  
                    responsive: true,
                    legend: {
                    display: false
                    },
                    scales: {
                    xAxes: [{
                    gridLines: {
                    display: false,
                            ticks: {
                            min: 0,
                            max: 10,
                                    stepSize: 0.01
                            }
                    }
                    }],
                            yAxes: [{
                            gridLines: {
                            display: true,
                                    ticks: {
                                    stepSize: 0.01,
                                            suggestedMin: 0.5,
                                            suggestedMax: 5
                                    }
                            }
                            }]
                    }
            }

И это сюжет: 

            var myChart = new Chart(ctx, {
            showTooltips: false,
                    type: 'scatter',
                    data: scatterChartData,
                    options: scatterOptions
            });
...