Диаграмма. js - Как создать другую глобальную конфигурацию между осью x и осью y - PullRequest
Новая
       32

Диаграмма. js - Как создать другую глобальную конфигурацию между осью x и осью y

0 голосов
/ 19 февраля 2020

Я использую Диаграмму. js (https://www.chartjs.org/) на нескольких страницах моего сайта для отображения различных диаграмм

Чтобы упростить добавление и модификацию этих диаграмм, я добавил строки в мой скрипт для настройки Chart. js в отличие от базовых c параметров 

Chart.defaults.scale.gridLines.display =  true
Chart.defaults.scale.gridLines.drawBorder =  true
Chart.defaults.scale.gridLines.color =  '#f5f5f5'
Chart.defaults.global.legend.display = true;
Chart.defaults.global.legend.labels.fontSize = 13
Chart.defaults.global.legend.labels.fontColor = '#373d3f'
....

Проблема заключается в том, что в некоторых параметрах мне нужны разные значения для осей x и y, например для drawOnChartArea option

И я не знаю, как это сделать, потому что он не работает: 

Chart.defaults.scale.xAxes.gridLines.drawOnChartArea = false
Chart.defaults.scale.yAxes.gridLines.drawOnChartArea = true

Итак, я все еще вынужден добавить в опции всю мою графику эти строки: 

options: {
  scales: {
    xAxes: [{
      gridLines: {
        drawOnChartArea: false,
      }
    }],
    yAxes: [{
      gridLines: {
        drawOnChartArea: true,
      }   
    }],
  },
}

Как создать другую глобальную конфигурацию между осью x и осью y?

Есть ли другой способ создания глобальной конфигурации ( очиститель? более эффективный?) для диаграммы. js?

1 Ответ

1 голос
/ 25 февраля 2020

Chart.defaults содержит диаграмму type, специфицирующую c разделы, которые включают параметр scales. Вы можете использовать console.log(Chart.defaults), чтобы узнать, как это выглядит. Например,

Chart.defaults.bar определяется следующим образом: 

"bar": {
  "hover": {
    "mode": "label"
  },
  "scales": {
    "xAxes": [{
      "type": "category",
      "offset": true,
      "gridLines": {
        "offsetGridLines": true
      }
    }],
    "yAxes": [{
      "type": "linear"
    }]
  }
}

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

Chart.defaults.bar.scales.xAxes[0].gridLines.drawOnChartArea = false;

Если, однако, родительский объект еще не определен, вам необходимо назначить свойство вместе с его родительским объектом или иерархией объектов. Когда вы сделаете это, убедитесь, что также приняли ранее существующие значения по умолчанию. 

Chart.defaults.bar.legend = { display: false };

Пожалуйста, посмотрите ниже пример кода. 

Chart.defaults.bar.legend = {
  display: false
};
Chart.defaults.bar.scales.xAxes[0].gridLines.drawOnChartArea = false;
Chart.defaults.bar.scales.yAxes[0] = {
  type: 'linear',
  gridLines: {
    drawOnChartArea: false
  },
  ticks: {
    beginAtZero: true
  }
};

new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
    labels: ["A", "B", "C", "D"],
    datasets: [{
      data: [25, 18, 8, 13],
      backgroundColor: ['red', 'blue', 'green', 'orange']
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="myChart" height="90"></canvas>
...