highcharts - 在 HighCharts 中使用 CSS 类

Question

是否可以使用 CSS 类来设置图表的不同元素的样式，而不是使用诸如（fontWeight、fontColor 等）之类的 highchart 选项指定 CSS 样式？

score 5 · Accepted Answer

在许多情况下（工具提示、标签），您可以将 useHTML 设置为 true，然后使用不带 !important 的 CSS 样式或使用格式化程序定义您自己的带有 CSS 样式的元素。

score 3 · Accepted Answer

是的，您必须使用!Important它，因为它是覆盖 inline 的唯一方法style。
您的图表呈现在某些内容上，您必须在chart.rendertTo选项上传递它的 id。
因此，您可以通过图表容器匹配元素，例如。

#container text {
    font-size: 14px !Important;
}

score 0 · Accepted Answer

您可以在 highcharts 'chart' 选项中使用 css 类名，但这些更改不会反映在导出的图表上。例如：

chart{
    type: 'line',
    className: 'someCss'
}

CSS：

.someCss{
    border-top-left-radius: 25px;
    font-weight: bold;
    font-style: italic;
}

score 0 · Accepted Answer

您的 highcharts 图表是 html 中的 SVG。您需要检查 SVG 源代码以了解类的名称，然后才能在 CSS 中使用它们。您需要添加 !important，因为 SVG 中已经存在一些默认样式。

例如，您可以使用

text { 
    fill:red !important;
    font-family: "Arial" !important;
    font-size  : 12px !important;
}

定义默认字体颜色、系列和样式

或者

.highcharts-yaxis-labels text
{
   (some css )
}

定义 y 轴标签样式

4 回答 4