chart.js переключатель х/ось у на линейной диаграмме

Question

Скажем, у меня есть линейный график, как это: https://jsfiddle.net/13fyhL4j/

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script> 

<canvas id="myChart" width="400" height="400"></canvas> 

JS:

var ctx = document.getElementById("myChart"); 
var yLabels = [0, 2, 3, 6, 7]; 
var xLabels = ['A', 'B', 'C', 'D', 'E']; 

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: xLabels, 
     datasets: [ 
      { 
       type: 'line', 
       label: 'Line', 
       data: yLabels, 
       fill: false,     
      } 
     ] 
    }, 
    options:{ 
     scales: { 
        xAxes: [{ 
         display: true, 
         scaleLabel: { 
          display: true, 
          labelString: 'x label' 
         }, 

        }], 
        yAxes: [{ 
         display: true, 
         scaleLabel: { 
          display: true, 
          labelString: 'y label' 
         }, 

        }] 
       } 
    } 
}); 

Здесь ось х имеет шкалу категорий, а ось y имеет линейную шкалу. Мне нужно поменять ось, однако я не могу найти, как сделать линейную ось x и осью y.

Image explaning situation

Необходимо изменить не только значения оси, но и саму диаграмму.

Answer 1

Я не смог найти ничего, что указывает на то, что вы можете сделать это с помощью линейного графика, но вы можете сделать это с разбросом. Первый шаг абстрагируясь от свойств оси от xAxes и yAxes:

const xAxis = [{ 
    /*type: 'time', time: { displayFormats: {} }, whatever*/ 
}]; 

const revenueAxis = [{ 
    /*scaleLabel: {}, ticks: {}, whatever*/ 
}]; 

Затем вы решаете, какой набор данных, чтобы положить на ось которого любое условие вы определяете:

let swapAxes = true; 
const xValues = [1,2,3,4,5]; 
const yValues = [5,4,3,2,1]; 
let data = []; 

const zipper = (a, b) => { 
    for (let i of a) data.push({x: a[i-1], y: b[i-1]}); 
    return data; 
} 

data = condition ? zipper(yValues , xValues) : zipper(xValues, yValues); 

Вы будете обратите внимание, что каждое действие в zipper() толкает объект со значениями x и y на массив. Именно так задаются диаграммы для приема данных (массив объектов, содержащий значения x и y), поэтому убедитесь, что вы следуете этому шаблону.

Теперь установите ось:

const options = { 
    /*Whatever options you have*/, 
    scales: { 
     xAxes: condition ? yAxis : xAxis, 
     yAxes: condition ? xAxis : yAxis 
    } 
} 

Теперь, если вы положили, что в вашем коде, все, что вам нужно сделать, это переключить condition для переключения осей.