如何通過CSS規則控制Highchart.js Dom元素

您可以看看this Demo並告訴我如何控制Highchart元素的CSS規則，如標題或背景顏色？我知道Highchart提供了一些內部屬性和功能，但我需要通過CSS和Dom操作來完成此操作。如何通過CSS規則控制Highchart.js Dom元素

這裏是我試圖改變Highchart標題的顏色代碼：

.highcharts-title{color:red !important;}

，但它沒有工作！

謝謝

來源

2014-09-26 user3649067

據我所知，這是做這件事的首選方式。

演示http://jsfiddle.net/o7jrucf6/2/

$('#container').highcharts({ 

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

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



});

enter image description here

來源

2014-09-26 19:06:20

嗨阿里感謝您的回覆，但正如我所說我需要用CSS來做到這一點。讓我解釋一下，我需要隱藏小媒體查詢的標題，所以我想我們可以在高圖表上使用dom元素來做到這一點 – user3649067 2014-09-26 19:10:34

我不確定他們是否允許你通過CSS來做到這一點。我看到源代碼，並且正在應用內聯樣式，因此您的CSS不會受到影響。看看他們的文檔了 – 2014-09-26 19:13:38

Highcharts使用SVG繪製，所以你需要使用proper SVG attribute。在你上面的例子中，它的填充不是顏色：

.highcharts-title{fill:red !important;}

更新example。

來源

2014-09-26 20:10:20 Mark

您需要設置標題中的useHTML標誌爲true。

title:{ 
    text: 'any', 
    useHTML: true 
}

來源

2014-09-29 10:46:28

如何通過CSS規則控制Highchart.js Dom元素

回答

相關問題