在高圖中應用股票圖表樣式

我迄今爲止創建了一個到我的頁面的高圖表。但是我想，如果他們是低於或高於0我已經繪製在0線應用不同的顏色，但不能似乎改變顏色，所以它看起來像以下：在高圖中應用股票圖表樣式

enter image description here

這裏是我的代碼

$(function() { 
 
    $('#chart-container').highcharts({ 
 
    title: { 
 
     text: '', 
 
     x: -20 //center 
 
    }, 
 
    subtitle: { 
 
     text: '', 
 
     x: -20 
 
    }, 
 
    exporting: { 
 
     enabled: false 
 
    }, 
 
    xAxis: { 
 
     categories: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'Aug', 'Septemper', 'Oktober', 'November', 'December'], 
 

 
     labels: { 
 
     enabled: false 
 
     }, 
 
    }, 
 
    yAxis: { 
 
     gridLineWidth: 0, 
 
     minorGridLineWidth: 0, 
 
     title: { 
 
     text: '' 
 
     }, 
 
     labels: { 
 
     enabled: false 
 
     }, 
 
     plotLines: [{ 
 
     color: 'orange', 
 
     width: 2, 
 
     value: 0, 
 
     }] 
 
    }, 
 
    tooltip: { 
 
     valueSuffix: 'Kr.' 
 
    }, 
 
    legend: { 
 
     layout: 'vertical', 
 
     align: 'right', 
 
     verticalAlign: 'middle', 
 
     borderWidth: 0 
 
    }, 
 
    credits: { 
 
     enabled: false 
 
    }, 
 
    series: [{ 
 
     showInLegend: false, 
 
     name: 'Tokyo', 
 
     data: [0.0, 6.9, 9.5, -14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
 
    }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 
<div id="chart-container" style="min-width: 310px; height: 100%; margin: 0 auto"></div>

來源

2015-01-11 Peter Pik

您正在尋找negativeColor和negativeFillColor選項。

以下是官方example的鏈接。

而且你的代碼更新：

$(function() { 
 
    $('#chart-container').highcharts({ 
 
    title: { 
 
     text: '', 
 
     x: -20 //center 
 
    }, 
 
    subtitle: { 
 
     text: '', 
 
     x: -20 
 
    }, 
 
    exporting: { 
 
     enabled: false 
 
    }, 
 
    xAxis: { 
 
     categories: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'Aug', 'Septemper', 'Oktober', 'November', 'December'], 
 

 
     labels: { 
 
     enabled: false 
 
     }, 
 
    }, 
 
    yAxis: { 
 
     gridLineWidth: 0, 
 
     minorGridLineWidth: 0, 
 
     title: { 
 
     text: '' 
 
     }, 
 
     labels: { 
 
     enabled: false 
 
     }, 
 
     plotLines: [{ 
 
     color: 'orange', 
 
     width: 2, 
 
     value: 0, 
 
     }] 
 
    }, 
 
    tooltip: { 
 
     valueSuffix: 'Kr.' 
 
    }, 
 
    legend: { 
 
     layout: 'vertical', 
 
     align: 'right', 
 
     verticalAlign: 'middle', 
 
     borderWidth: 0 
 
    }, 
 
    credits: { 
 
     enabled: false 
 
    }, 
 
    series: [{ 
 
     showInLegend: false, 
 
     name: 'Tokyo', 
 
     data: [0.0, 6.9, 9.5, -14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
 
     color: 'purple', 
 
     negativeColor: 'red' 
 
    }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 
<div id="chart-container" style="min-width: 310px; height: 100%; margin: 0 auto"></div>

來源

2015-01-11 17:48:16 Mark

在高圖中應用股票圖表樣式

回答

相關問題