列的正/负部分的不同颜色

Question

我试图通过列范围图表来实现以下目标：

在api文档中，我找到了选项＆＃34; negativeColor＆＃34; （＆＃34;图形部分的颜色或低于阈值的点。＆＃34;），但此选项为整列着色。

有没有办法来定义列的正面部分应该是＆＃34;颜色＆＃34;负面部分应为＆＃34; negativeColor＆＃34;？

Answer 1

不使用列范围，而是使用简单的堆叠列系列，一个系列的负值和第二个系列的正值。

Answer 2

你可以这样做。

$(document).ready(function() {

        var options = {
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'bar'
            },
            title: {
                text: 'Spiritual Gifts Results'
            },
            colors: [
                '#3BBEE3'
                ],
            xAxis: {
                categories: []
            },

            yAxis: {
                title: {
                    text: 'Service'
                }
            },
            series: []
        };

        var data = document.getElementById("hdn_Data");
        // Split the lines
        if (data.value != "") {
            var lines = data.value.split('\n');

            // Iterate over the lines and add categories or series
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                // header line containes categories
                if (lineNo == 0) {
                    $.each(items, function(itemNo, item) {
                        if (itemNo > 0) options.xAxis.categories.push(item);
                    });
                }
                // the rest of the lines contain data with their name in the first position
                else {
                    var series = {
                        data: []
                    };
                    $.each(items, function(itemNo, item) {
                        var data = {};
                        if (itemNo == 0) {
                            series.name = item;
                        } else {
                            data.y = parseFloat(item);
                            if (itemNo <= 3) { //Here to specify your mid value
                                data.color = 'Gray';
                            }
                            else {
                                data.color = '#3BBEE3';
                            }
                            series.data.push(data);
                        }
                    });
                    options.series.push(series);
                  }
                });

                // Create the chart
                var chart1 = new Highcharts.Chart(options);
            }
        });