javascript - C3 中水平条形图标签中的长字符串

Question

C3 似乎在处理长字符串作为水平条形图表中的标签时遇到了麻烦。这是一个示例片段:

let bookData = [{
  "title": "1984",
  "author": "George Orwell",
  "year": "1949",
  "count": 6
}, {
  "title": "The Handmaid's Tale",
  "author": "Margaret Atwood",
  "year": "1985",
  "count": 3
}, {
  "title": "The Picture of Dorian Gray",
  "author": "Oscar Wilde",
  "year": "1890",
  "count": 2
}, {
  "title": "Animal Farm",
  "author": "George Orwell",
  "year": "1945",
  "count": 5
}, {
  "title": "The Hobbit",
  "author": "J.R.R. Tolkien",
  "year": "1937",
  "count": 3
}, {
  "title": "Alice's Adventures in Wonderland",
  "author": "Lewis Carroll",
  "year": "1865",
  "count": 3
}, {
  "title": "Harry Potter Boxset (Harry Potter, #1-7)",
  "author": "J.K. Rowling",
  "year": "1998",
  "count": 2
}, {
  "title": "Romeo and Juliet",
  "author": "William Shakespeare",
  "year": "1597",
  "count": 4
}, {
  "title": "Macbeth",
  "author": "William Shakespeare",
  "year": "1606",
  "count": 3
}, {
  "title": "King Lear",
  "author": "William Shakespeare",
  "year": "1603",
  "count": 2
}, {
  "title": "The Merchant of Venice",
  "author": "William Shakespeare",
  "year": "1596",
  "count": 1
}, {
  "title": "Wuthering Heights",
  "author": "Emily Bront\u00eb",
  "year": "1847",
  "count": 1
}, {
  "title": "The Outsiders",
  "author": "S.E. Hinton",
  "year": "1967",
  "count": 1
}, {
  "title": "The Metamorphosis",
  "author": "Franz Kafka",
  "year": "1915",
  "count": 1
}, {
  "title": "The Glass Menagerie",
  "author": "Tennessee Williams",
  "year": "1945",
  "count": 1
}, {
  "title": "Waiting for Godot",
  "author": "Samuel Beckett",
  "year": "1953",
  "count": 1
}, {
  "title": "The Merry Adventures of Robin Hood",
  "author": "Howard Pyle",
  "year": "1883",
  "count": 1
}, {
  "title": "The Complete Grimm's Fairy Tales",
  "author": "Jacob Grimm",
  "year": "1812",
  "count": 1
}, {
  "title": "The Count of Monte Cristo",
  "author": "Alexandre Dumas",
  "year": "1844",
  "count": 3
}, {
  "title": "Pride and Prejudice",
  "author": "Jane Austen",
  "year": "1813",
  "count": 5
}, {
  "title": "The Hitchhiker's Guide to the Galaxy: A Trilogy in Four Parts",
  "author": "Douglas Adams",
  "year": "1986",
  "count": 3
}, {
  "title": "The Three Musketeers (The D'Artagnan Romances, #1)",
  "author": "Alexandre Dumas",
  "year": "1844",
  "count": 1
}, {
  "title": "The Call of the Wild",
  "author": "Jack London",
  "year": "1903",
  "count": 1
}, {
  "title": "David Copperfield",
  "author": "Charles Dickens",
  "year": "1849",
  "count": 1
}, {
  "title": "The Adventures of Tom Sawyer",
  "author": "Mark Twain",
  "year": "1876",
  "count": 1
}, {
  "title": "Julius Caesar",
  "author": "William Shakespeare",
  "year": "1599",
  "count": 1
}, {
  "title": "To Kill a Mockingbird",
  "author": "Harper Lee",
  "year": "1960",
  "count": 5
}, {
  "title": "The Great Gatsby",
  "author": "F. Scott Fitzgerald",
  "year": "1925",
  "count": 5
}, {
  "title": "A Farewell to Arms",
  "author": "Ernest Hemingway",
  "year": "1929",
  "count": 2
}, {
  "title": "Twelfth Night",
  "author": "William Shakespeare",
  "year": "1601",
  "count": 1
}, {
  "title": "Lord of the Flies",
  "author": "William Golding",
  "year": "1954",
  "count": 3
}, {
  "title": "Charlotte's Web",
  "author": "E.B. White",
  "year": "1952",
  "count": 1
}, {
  "title": "Frankenstein",
  "author": "Mary Wollstonecraft Shelley",
  "year": "1818",
  "count": 1
}, {
  "title": "Moby-Dick or, The Whale",
  "author": "Herman Melville",
  "year": "1851",
  "count": 2
}, {
  "title": "The Scarlet Letter",
  "author": "Nathaniel Hawthorne",
  "year": "1850",
  "count": 1
}, {
  "title": "Fahrenheit 451",
  "author": "Ray Bradbury",
  "year": "1953",
  "count": 2
}, {
  "title": "Slaughterhouse-Five",
  "author": "Kurt Vonnegut",
  "year": "1969",
  "count": 1
}, {
  "title": "The Shining (The Shining, #1)",
  "author": "Stephen King",
  "year": "1977",
  "count": 1
}, {
  "title": "A Clockwork Orange",
  "author": "Anthony Burgess",
  "year": "1962",
  "count": 1
}, {
  "title": "Little Women (Little Women, #1)",
  "author": "Louisa May Alcott",
  "year": "1868",
  "count": 1
}, {
  "title": "Things Fall Apart",
  "author": "Chinua Achebe",
  "year": "1958",
  "count": 1
}, {
  "title": "One Flew Over the Cuckoo's Nest",
  "author": "Ken Kesey",
  "year": "1962",
  "count": 1
}, {
  "title": "Anna Karenina",
  "author": "Leo Tolstoy",
  "year": "1878",
  "count": 1
}, {
  "title": "A Man for All Seasons",
  "author": "Robert Bolt",
  "year": "1960",
  "count": 1
}, {
  "title": "Hamlet",
  "author": "William Shakespeare",
  "year": "1603",
  "count": 1
}, {
  "title": "Hedda Gabler",
  "author": "Henrik Ibsen",
  "year": "1890",
  "count": 1
}, {
  "title": "The Idiot",
  "author": "Fyodor Dostoyevsky",
  "year": "1868",
  "count": 1
}, {
  "title": "Persepolis: The Story of a Childhood (Persepolis, #1)",
  "author": "Marjane Satrapi",
  "year": "2000",
  "count": 1
}, {
  "title": "Watchmen",
  "author": "Alan Moore",
  "year": "1987",
  "count": 1
}, {
  "title": "The Arabian Nights: Tales of 1001 Nights, Volume 1",
  "author": "Anonymous",
  "year": "800",
  "count": 1
}, {
  "title": "No Exit",
  "author": "Jean-Paul Sartre",
  "year": "1944",
  "count": 1
}, {
  "title": "The Hound of the Baskervilles",
  "author": "Arthur Conan Doyle",
  "year": "1902",
  "count": 1
}, {
  "title": "Antigone (The Theban Plays, #3)",
  "author": "Sophocles",
  "year": "-441",
  "count": 1
}, {
  "title": "The Rime of the Ancient Mariner",
  "author": "Samuel Taylor Coleridge",
  "year": "1798",
  "count": 1
}, {
  "title": "Great Expectations",
  "author": "Charles Dickens",
  "year": "1860",
  "count": 2
}, {
  "title": "The Illiad of Homer",
  "author": "Homer",
  "year": "-750",
  "count": 1
}, {
  "title": "The Odyssey",
  "author": "Homer",
  "year": "-720",
  "count": 1
}, {
  "title": "Sense and Sensibility",
  "author": "Jane Austen",
  "year": "1811",
  "count": 1
}, {
  "title": "Emma",
  "author": "Jane Austen",
  "year": "1815",
  "count": 1
}, {
  "title": "Jane Eyre",
  "author": "Charlotte Bront\u00eb",
  "year": "1847",
  "count": 1
}, {
  "title": "Of Mice and Men",
  "author": "John Steinbeck",
  "year": "1937",
  "count": 1
}, {
  "title": "Brave New World",
  "author": "Aldous Huxley",
  "year": "1932",
  "count": 3
}, {
  "title": "Life of Pi",
  "author": "Yann Martel",
  "year": "2001",
  "count": 1
}, {
  "title": "The Sisters Brothers",
  "author": "Patrick deWitt",
  "year": "2011",
  "count": 1
}, {
  "title": "The Kite Runner",
  "author": "Khaled Hosseini",
  "year": "2003",
  "count": 1
}, {
  "title": "The War of the Worlds",
  "author": "H.G. Wells",
  "year": "1898",
  "count": 1
}, {
  "title": "The Restaurant at the End of the Universe (Hitchhiker's Guide to the Galaxy, #2)",
  "author": "Douglas Adams",
  "year": "1980",
  "count": 1
}, {
  "title": "The Chrysalids",
  "author": "John Wyndham",
  "year": "1955",
  "count": 1
}, {
  "title": "Gulliver's Travels",
  "author": "Jonathan Swift",
  "year": "1726",
  "count": 1
}, {
  "title": "The Invisible Man",
  "author": "H.G. Wells",
  "year": "1897",
  "count": 1
}, {
  "title": "The Gulag Archipelago 1918-1956",
  "author": "Aleksandr Solzhenitsyn",
  "year": "1973",
  "count": 1
}, {
  "title": "Cloud Atlas",
  "author": "David Mitchell",
  "year": "2004",
  "count": 1
}, {
  "title": "Holy Bible: King James Version",
  "author": "Anonymous",
  "year": "1611",
  "count": 1
}, {
  "title": "The Catcher in the Rye",
  "author": "J.D. Salinger",
  "year": "1951",
  "count": 1
}, {
  "title": "The Time Machine",
  "author": "H.G. Wells",
  "year": "1895",
  "count": 1
}];

const labels = bookData.map((book) => book.title);
const y = bookData.map((book) => book.count);

labels.splice(0, 0, "x");
y.splice(0, 0, "count");

const char = c3.generate({
  data: {
    x: "x",
    columns: [
      labels, y
    ],
    type: "bar"
  },
  axis: {
    x: {
      type: "category",
    },
    y: {
      tick: {
        values: _.range(0, 7),
      }
    },
    rotated: true,
  },
  bindto: "#book-title-histogram",
  size: {
    height: 1400,
    width: 800,
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.2/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.2/c3.js"></script>


<div id="book-title-histogram">
  <!-- content goes here -->
</div>

Answer 1

从这里thread您可以使用 axis.x.tick.multiline = false。

然后像这样更新你的代码:

const char = c3.generate({
  data: {
    x: "x",
    columns: [
      labels, y
    ],
    type: "bar"
  },
  axis: {
    x: {
      type: "category",
      tick: {
        multiline:false
      }
    },
    y: {
      tick: {
        values: _.range(0, 7),
      }
    },
    rotated: true,
  },
  bindto: "#book-title-histogram",
  size: {
    height: 1400,
    width: 800,
  }
});

此外，您可以使用 axis.x 对象的不同选项来获得您想要的结果(即:tick.multilineMax、x.height...)。

在文档中，您可以找到很多不同的参数来使用 here .

您还可以增加图表的总高度(使用固定高度或 bookData.length)并执行以下操作:

const char = c3.generate({
  data: {
    x: "x",
    columns: [
      labels, y
    ],
    type: "bar"
  },
  axis: {
    x: {

      type: "category",
      tick: {
        multiline:true,
      }
    },
    y: {
      tick: {
        values: _.range(0, 7),
      }
    },
    rotated: true,
  },
  bindto: "#book-title-histogram",
  size: {
    height: bookData.length * 50
    width: 800,
  }
});