高圖中的條形圖，用於指示每個欄中兩種顏色的值，其中一種顏色始終保持固定

Question

我正在研究一個項目，並且我想使用條形圖（HighChart）來指示值。我更喜歡使用這種條形圖 - bar chart image

如果任何人已經在這種類型的條形圖上工作或有任何想法如何實現它，請分享。提前致謝。

Answer 1

設置軸最小值，然後創建一個額外的系列，它將完成第一個系列數據到最大軸。對於附加的假設系列設置選項，如enableMouseTracking或爲false，因此它不會與用戶進行交互。

yAxis: { 
    min: 0, 
    max: 700 
    }, 

    plotOptions: { 
    series: { 
     grouping: false, 
     borderWidth: 0 
    } 
    }, 

    series: [{ 
    enableMouseTracking: false, 
    linkedTo: 1, 
    data: [{ 
     y: 700, 
     color: 'rgba(66, 134, 244, 0.5)' 
    }, { 
     y: 700, 
     color: 'rgba(206, 49, 28, 0.5)' 
    }] 
    }, { 
    dataLabels: { 
     enabled: true, 
     style: { 
     fontSize: '20px', 
     textOutline: null 
     } 
    }, 
    data: [{ 
     y: 107, 
     color: 'rgba(66, 134, 244, 1)' 
    }, { 
     y: 31, 
     color: 'rgba(206, 49, 28, 1)' 
    }] 
    }] 

例如：http://jsfiddle.net/sL5bpep3/