如何用我們自己的CSS設計yAxis劇情？

我已經創建了一個帶有標籤樣式的正常yAxis情節線。但現在我想創建一個帶有一些CSS樣式的yAxis情節線。有什麼建議麼？這是我到目前爲止已經試過這是我的代碼如何用我們自己的CSS設計yAxis劇情？

var chart = $('#tv_chart_container').highcharts(); 
chart.yAxis[0].removePlotLine('hori_line'); 
          data = chart.series[0].data; 
    var test = data.length; 
    var value = data[999].y; 
    chart.yAxis[0].addPlotLine({ 
    value: value, // Value of where the line will appear 
    width: 2 , 
    color: '#248EC6', 
    // dashStyle: 'dash', 
    id: 'hori_line', 
    label: { 
    text: value, 
    align: 'right', 
    style: { 
     color: '#FFFFFF', 
     fontWeight: 'bold', 

    } 
    } 

    });

這裏是sample.What我確實需要

來源

2016-06-15 Pilaventhiran

一些CSS樣式？你可以改變顏色，厚度等的plotlines：[{ 值：450，顏色： '＃FF0000'，寬度：2， zIndex的：4 }]我們目前的確那樣 –

@NishithKantChaturvedi。但是我需要一個情節，就像上面的圖片一樣。看到行結束處有一個五角形形狀的設計，它包含yAxis值。 – Pilaventhiran

看到這個http://stackoverflow.com/questions/15791918/highcharts-add-plotline-label-with-images –

我工作了一個驗證的概念，得到相當接近到你在問什麼。這是使用Highcharts中的所有代碼，而不是處理外部CSS的任何內容。

繪圖線不能擁有您正在尋找的數據標籤格式，所以我使用散點圖系列來代替線。另外，當您移動線圖中的新點時，這也會爲您提供（默認）Highcharts動畫。

我做了幾件事在這裏：

我增加了散點圖線作爲一個獨立的「虛擬」系列，用戶不會在傳說中看到和不能與之交互。
我格式化散點圖線的最後（第二個）點的數據標籤，以顯示藍色背景和白色數字，如示例中所示。
我在散點圖線的最後（第二個）點上用菱形設置了一個標記。與數據標籤設置一起，這會爲您提供上面顯示的標記示例。現在，數據標籤有一個shape: 'callout'選項，但克拉只能指向這種類型的系列。
我更新了您的mouseOver事件以更新散點圖線的值，而不是添加和刪除繪圖線。

這裏是概念證明小提琴：http://jsfiddle.net/brightmatrix/tzu3khp1/。您還可以看到下面結果的屏幕截圖。

我希望所有這些信息對您有所幫助。請讓我知道，如果你有任何問題;我很樂意更新這個答案進行詳細說明。

來源

2016-06-16 12:45:39

感謝您的想法。但我不能用這個yAxis情節。 – Pilaventhiran

@Pilaventhiran爲什麼呢？此解決方案旨在替換情節線，而不是與他們一起工作。再次，讓我知道是否有什麼我可以做的，使這個答案更有助於你。 –

因爲我的是一個實時交易圖。所以我們必須自動更新它，而不必將光標放在圖上 – Pilaventhiran

如何用我們自己的CSS設計yAxis劇情？

回答

相關問題