C3.js Bar Graphs: установка меток оси X

Мне нужно нарисовать гистограмму с двумя наборами данных, и я хочу пометить каждый набор (по оси X) текстом. Ниже код производит:

Как видно, метки генерируются автоматически, т.е. 0 и 1 (выделены желтым цветом). Но я хочу изменить 0 и 1 на два текстовых значения, скажем, P1 и P2.

var chart = c3.generate({
  bindto: '#bar',
  data: {
    columns: [
      ['A1', 30, 200],
      ['A2', 130, 100],
      ['A3', 12, 59],
      ['A4', 42, 25],
      ['A5', 76, 84],
      ['A6', 83, 14],
      ['A7', 54, 87],
      ['A8', 110, 40],
      ['A9', 34, 48]
    ],
    type: 'bar'
  },
  bar: {
    width: {
      ratio: 0.5
    }
  }
});

<script src = "http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<link href = "http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.css" rel = "stylesheet"/>

<div id = "bar">
</div>

Я пока не мог найти способ присвоить метки оси X ...

javascript charts c3.js

31.03.2018 05:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 430

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

добавить опцию оси в код

var chart = c3.generate({
  bindto: '#bar',
  data: {
    columns: [
      ['A1', 30, 200],
      ['A2', 130, 100],
      ['A3', 12, 59],
      ['A4', 42, 25],
      ['A5', 76, 84],
      ['A6', 83, 14],
      ['A7', 54, 87],
      ['A8', 110, 40],
      ['A9', 34, 48]
    ],
    type: 'bar'
  },
  bar: {
    width: {
      ratio: 0.5
    }
  },
  axis: {
    x: {
      type: 'category',
      categories: ['cat1', 'cat2']
    }
  }
});

<script src = "http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<link href = "http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.css" rel = "stylesheet" />

<div id = "bar">
</div>

02.04.2018 13:36

Другие вопросы по теме

Как изменить цвет и толщину линии ссылки Google Organization Chart?

C# Xamarin Создать диаграмму с микродиаграммами

TickValues () в d3.js

Как интегрировать данные из Ajax в chart.js

Highcharts Waterfall: как автоматически рассчитать разницу между абсолютными значениями?

Как установить два ползунка, соединяющиеся с каждой строкой графика, с помощью plotly.js?

Дублирование оси X для графика (VB.net)

Отображение подсказки Google Scatter Chart для некоторых точек

Передача данных json в chartjs

D3js не форматирует текстовое значение

C3.js Bar Graphs: установка меток оси X

Ответы 1

Другие вопросы по теме

Похожие вопросы