时间戳

首页 > 解决方案 > 当 chart.styledMode 设置为 true 时，Highchart 长 y 轴标题可能与标题重叠

javascript - 当 chart.styledMode 设置为 true 时，Highchart 长 y 轴标题可能与标题重叠

问题描述

y轴标题过长时会被拆分。启用 styledMode 后，它似乎不再工作了。我该如何解决这个问题？请参阅小提琴的问题。下面是javascript代码。

var chart = Highcharts.chart('container', {
    chart: {
    styledMode: true,
},
title: {
    text: "test",
  align: "left",
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
    yAxis: {
    title: {
    text: 'Test maximum yAxis asdklfjas;lfks;alkfj;laskjf;alksjf;lkaljsf;jas;f',
  }
},
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]
}]
});

标签： javascripthighcharts

解决方案

因为：

当chart.styledMode选项为true时，不会对图表 SVG 应用任何表示属性（如fill、stroke、字体样式等）。相反，该设计纯粹由 CSS 应用。

Highcharts 带有一个默认的 CSS 文件css/highcharts.css，它是从SCSS构建的。

要自定义您的样式，您可以使用 SCSS 创建自己的主题，或者只需添加您自己的个人 CSS 规则。请参阅我们的CodePen 样板来试验默认的 SCSS。

这只是设置图表样式的另一种方式。您需要选择如何设置图表样式。

如果你禁用styledMode，那么你可以在配置中设置样式选项：

...
yAxis: {
    title: {
        enabled: true,
        text: 'very long title text here that will get cut off at the top when height becomes less than the length of the title',
        style: {
            font: 'bold 10pt Arial',
            color: 'rgb(0,0,0)',
            wordWrap:'break-word',
            width : "200px"
        }
    },
},
...

推荐阅读