Highcharts - 多个副标题 (2)

Question

在highcharts图表中是否可以有多个副标题（我需要2个）？顺便提一下，我已经有了主标题。

- whyAto8

---

你在技术上不能有两个字幕。但是，如果你描述一下你想要的外观，也许人们可以帮助你实现它。 - BPS

Answer 1

为什么不在字幕里加入一个换行符呢？

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

- Reality Extractor

---

顺便说一句，这是一个很棒的想法。但是实现它会带来另一个问题，就是字幕的第二行与下面的图表重叠了。我尝试给字幕添加边距，但没有效果，你有什么想法吗？ - whyAto8

@whyA 是的，你可能需要编辑 highcharts.js 才能使其正常工作，因为它并没有考虑到两条线的情况，我真的不知道从哪里开始。另一种方法可能是将 X 轴的最大值设置为远远超过实际最大值的某个值，这样即使第二条线延伸到轴区域，也不会覆盖任何数据。还有另一种选择，可以使用内联 CSS 来使副标题文本变小，从而更好地适应。 - Reality Extractor

@whyA 这可能也有所帮助，浮动标题和副标题：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/subtitle/floating/ 但我可能不会使用它，因为在不同的浏览器中预测标题/副标题的位置太困难了。 - Reality Extractor

没错，由于不同浏览器的行为不同，我也不会使用浮点数。 我猜可以通过减小字幕字体来解决这个问题，我会尝试一下。 - whyAto8

我尝试了使用<br>标签的方法。缺点是在导出图表时不支持HTML格式。在我的情况下，有时候导出后<br>会丢失，而有些情况下则会改变对齐方式。请参阅[useHTML]（http://api.highcharts.com/highcharts#subtitle）. - gmetzker

Answer 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();

});


});

- Richard Dinh

Answer 3

我不确定是否有内置功能可以使用多个字幕，但我猜使用jQuery手动将第二个字幕放在图表上面应该不需要太多的工作。您需要在CSS中使用相对或绝对定位，并确保它具有足够高的z-index以使其可见。在这里，您可以阅读更多关于如何定位HTML元素的信息：http://www.w3schools.com/css/css_positioning.asp。

- Knut Marius

---

是的，我也认为没有内置功能可以实现这个。好吧，我总是可以手动添加字幕的html标记，但问题是div会在highcharts创建的svg之外。这不是问题，但我还是想确认是否有更优雅的解决方案。 - whyAto8

Answer 4

看起来像是一个错误，所以我已经在这里报告了它：https://github.com/highslide-software/highcharts.com/issues/1704

- Sebastian Bochan

---

谢谢你的回复。不过目前我们还将此事搁置了。 - whyAto8

Answer 5

您可以使用普通的br-html标记在字幕中换行。然后，您可以根据是否换行来设置标题边距。

- Marcus Franzen

Answer 6

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

- Alexey Nikonov