Подзаголовок Chart.js не отображается

Я не могу заставить работать подзаголовок круговой диаграммы. Это просто не будет отображаться.

Я пробовал это: https://www.highcharts.com/docs/chart-concepts/title-and-subtitle

options: {
    pieceLabel: {
        showZero: true,
        fontColor: '#fff',
        fontFamily: "'Maven Pro', sans-serif",
        position: 'default'
    },
    title: {
        display: true,
        position: 'top',
        text: 'Screened',
        fontSize: 14
    },
    subtitle:{
        text: 'Subtitle',
    },
    legend: {
        display: false
    }
}

Моя диаграмма отображается нормально, поэтому я поделился только опциональной частью кода.

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


javascript charts chart.js subtitle
person Leah    schedule 28.11.2017    source источник

Ответы (3)


arrow_upward
12
arrow_downward

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

text: ['Title','Subtitle'],

Пример субтитров

Вот рабочий пример.

person David    schedule 28.11.2017
comment
Я пробовал, он отображается в той же строке с запятой между ними. - person Leah; 29.11.2017
comment
Какую версию библиотеки chart.js вы используете? В моем примере используется 2.7.0. Если я использую 2.4.0, я вижу, что элементы разделены запятыми. - person David; 29.11.2017

arrow_upward
2
arrow_downward

Для тех, кто все еще заинтересован в этом, я сделал простой плагин для субтитров: https://www.npmjs.com/package/chartjs-subtitle https://github.com/jeredmasters/chartjs-subtitle

Это позволяет вам иметь другой стиль по сравнению с основным заголовком.

person Jered    schedule 19.10.2018
comment
Как добавить в браузере? - person Taffarel Xavier; 08.10.2020

arrow_upward
-1
arrow_downward

Попробуйте этот пример:

Highcharts.chart('container', {

    chart: {
        marginTop: 80
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    subtitle: {
        text: 'This text has <b>bold</b>, <i>italic</i>, <span style="color: red">coloured</span>, <a href="http://example.com">linked</a> and <br/>line-broken text.'
    },

    series: [{
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

person Samuel Rizzon    schedule 28.11.2017
comment
Я использую Chart.js, а не Highcharts. Это круговая диаграмма. Я не уверен, как изменить формат js. - person Leah; 28.11.2017
comment
Немного сбивает с толку ссылка на документацию highcharts в вашем вопросе. Chart.js не поддерживает субтитры, поэтому добавление его в параметры не будет Работа. - person David; 28.11.2017