5

是否可以在 highcharts 图中有多个子标题（我需要 2 个）？仅供参考 - 我在副标题之前也有标题。

4

6 回答 6

3

为什么不在副标题中加入换行符？

subtitle: {
    text: 'Line 1 of the subtitle<br>Line 2 of the subtitle' 
},
于 2013-04-08T07:39:26.173 回答
2

我不确定是否有用于拥有多个字幕的内置功能，但我想使用例如 jQuery 来“手动”将带有第二个字幕的 div 放在图表顶部应该不是很多工作，无论您想要它在哪里。然后，您需要在 CSS 中使用相对或绝对定位，并确保它的 z-index 足够高以使其可见。

在这里您可以阅读有关如何定位 HTML 元素的更多信息：http: //www.w3schools.com/css/css_positioning.asp

于 2013-04-08T06:32:49.353 回答
2

这个答案有点晚了，但我希望这可以帮助其他人。

我遇到了类似的问题，最后我使用 highcharts 中的 renderer.text 函数在整个地方添加了一堆随机文本。

http://api.highcharts.com/highcharts#Renderer.text

在这里小提琴：http: //jsfiddle.net/flacoman91/bvJaQ/

移动文本有点乏味，但它会完成工作。

代码在这里

$(function () {
$('#container').highcharts({

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

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

}, function(chart) { // on complete
 var middle = chart.plotSizeX - 100;
    chart.renderer.text('Series 1', chart.plotSizeX / 2, 150)
        .attr({

        })
        .css({
            color: '#4572A7',
            fontSize: '16px'
        })
        .add();
    chart.renderer.text('Subtitle 2', chart.plotSizeX / 2, 300)
        .attr({

        })
        .css({
            color: '#4572A7',
            fontSize: '16px'
        })
        .add();

});


});
于 2014-01-10T21:44:13.750 回答
1

你可以用普通的 br-html-tag 换行。您可以根据是否断线来设置标题边距。

于 2013-07-03T18:41:19.050 回答
1

It looks like a bug so I've reported it here: https://github.com/highslide-software/highcharts.com/issues/1704

于 2013-04-10T11:47:53.587 回答
0

js

const graphSubtitles = `
        <span class="subtitle1">${subtitle1}</span>
        <span class="subtitle2">${subtitle2}</span>
    `;
const config = {
            title: {
                align: 'low',
                text: 'Title',
            },
            subtitle: {
                align: 'low',
                useHTML: true,
                text: graphSubtitles,
                textAlign: 'left',
            },
            ...
};
Highcharts.chart('container', config);

css

subtitle1 {
   color: red;
}
subtitle2 {
   color: blue;
}
于 2022-02-01T17:09:25.870 回答