highcharts (2)第二章:

qf9go6mv  于 2022-11-11  发布在  Highcharts
关注(0)|答案(6)|浏览(125)

有没有可能有多个副标题(我需要2)在highcharts图?只是顺便说一句-我有标题以及之前的副标题。

bbuxkriu

bbuxkriu1#

为什么不直接在副标题里放一个换行符呢?

subtitle: {
    text: 'Line 1 of the subtitle<br>Line 2 of the subtitle' 
},
5f0d552i

5f0d552i2#

我不确定是否有内置的多个字幕的功能,但我想使用jQuery“手动”将包含第二个字幕的div放在图表顶部的任何位置都不需要太多工作。然后,您需要在CSS中使用相对或绝对定位,并确保它的z索引足够高以使其可见。
您可以在这里阅读有关如何定位HTML元素的更多信息:http://www.w3schools.com/css/css_positioning.asp

woobm2wo

woobm2wo3#

这个答案有点晚了,但我希望这能帮助其他人。
我也遇到过类似的问题,最后我使用了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();

});

});
62lalag4

62lalag45#

你可以用一个普通的br-html-tag在字幕中换行。然后你可以根据你是否换行来设置标题边距。

blmhpbnm

blmhpbnm6#

日本

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;
}

相关问题