Горизонтальная полоса с двумя диаграммами якс - PullRequest
Новая
       15

Горизонтальная полоса с двумя диаграммами якс

0 голосов
/ 11 октября 2018

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

chart

Это мой код JSFiddle .

Я не могу изменить имена вторых ячей

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

    var canvas = document.getElementById('myChart');
    var extremo1=[-5, 3, 9, -11];
    var extremo2=[-5, 3, 9, -11];
    var data = {
    labels: ["Visua_Verbal", "Secuencial_Global", "Sensitivo_Intuitivo", "Reflexivo_Activo"],

    datasets: [
        {
         backgroundColor: 'rgba(63, 191, 191, 0.75)',
         borderColor: 'rgba(63, 191, 191, 0.75)',
         hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
         hoverBorderColor: 'rgba(191, 63, 63, 1)',
                 data: extremo1
        },
        {   
         backgroundColor: 'rgba(63, 191, 191, 0.75)',
         borderColor: 'rgba(63, 191, 191, 0.75)',
         hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
         hoverBorderColor: 'rgba(191, 63, 63, 1)',
                 data: extremo1
        }
    ]
};

var option = {
      maintainAspectRatio: false,
      responsive: true,
        scales: {
               xAxes: [{
                 display: true,
                 ticks: {
                 maxTicksLimit: 12
                 }
               }],
               yAxes: [{
                  position: "left",
                  display: true,
                  ticks: { 
                  callback:(label,index,labels)=>{
                  label = label.match(/_(\w*)/)[1];
                  return label;
                  }}
                  },
                  {
                   position: "right",
                   display: true,
                   ticks: {

                   callback:(label,index,labels)=>{
                   return label ;
                   }
                  }
                 }]
                 },
                 legend: {
                         display: false
                }

};
var myLineChart = new Chart(canvas,{
    type: 'horizontalBar',
    data:data,
  options:option
});

1 Ответ

0 голосов
/ 11 октября 2018

В приведенном ниже фрагменте я установил параметры labels, type, offset для оси Y, чтобы достичь желаемого результата.Я также удалил ненужные свойства. 

var canvas = document.getElementById('myChart');
var extremo = [-5, 3, 9, -11];
var data = {
  datasets: [{
    backgroundColor: 'rgba(63, 191, 191, 0.75)',
    borderColor: 'rgba(63, 191, 191, 0.75)',
    hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
    hoverBorderColor: 'rgba(191, 63, 63, 1)',
    data: extremo
  }]
};

var option = {
  maintainAspectRatio: false,
  responsive: true,
  scales: {
    xAxes: [{
      ticks: {
        maxTicksLimit: 12
      }
    }],
    yAxes: [{
        labels: ['Verbal', 'Global', 'Reflexivo', 'Sensitivo']
      },
      {
        position: 'right',
        labels: ['Visual', 'Secuencial', 'Activo', 'Intuitivo'],
        gridLines: {
          display: false
        },
        type: 'category',
        offset: true
      }
    ]
  },
  legend: {
    display: false
  }
};

var myLineChart = new Chart(canvas, {
  type: 'horizontalBar',
  data: data,
  options: option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart">
...