Question

我使用Stacked and Grouped column chart创建了一个Highcharts.js，用于叶子部分，即根据月份有31,28,30天，并相应地显示叶子。快照如下：

如果我们仔细查看，我们会根据代码创建多个部分，这些部分由borderColor:'black'和borderWidth:1分叉。

我想删除这些内部边框，而是为整个图表提供父边框，如下所示：

js代码如下：

function convertToStackedFormat(data)
{
    var array1 = new Array();
    $.each(data, function (index, element) {
        if (element.length > 0)
        {
            $.each(element, function () {
                array1.push(this);
            });
        }
    });
    return array1;
}

function displayLeaveDetails(data) {
    var data1 = convertToJsonObjectArray(data);
    data1 = convertToStackedFormat(data1);

    Highcharts.chart('leaveContainer', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Leaves'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
        },
        yAxis: {
            min: 0,
            max: 35,
            tickInterval: 5,
            endOnTick: false,
            title: {
                text: 'Leaves (days)'
            }
        },
        tooltip: {
            formatter: function () {
                return this.point.color=="white"?null:this.point.y;
            }
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                borderWidth: 1,
                borderColor: 'black'
            }
        },
        series: [{
            stack:0,
            name: 'Leaves',
            data: data1
        }]
    });
}

是否可以通过Highcharts.js设置一些属性来实现？

请帮忙。

Answer 1

我已通过设置<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function test(n){ alert('input:'+n); var promise = new Promise(function(fulfill, reject) { /*put your condition here */ if(n) { fulfill("Inside If! match found"); } else { reject(Error("It broke")); } }); promise.then(function(result) { alert(result); // "Inside If! match found" }, function(err) { alert(err); // Error: "It broke" }); } </script> </head> <body> <input type="button" onclick="test(1);" value="Test"/> </body> </html>并将边框颜色的颜色设置为plotOptions column shadow object来解决此问题。

white

JS Fiddle链接如下：

http://jsfiddle.net/s38b1o9z/5/

这不是一个完美的解决方案，但它确实有效。

谢谢

Answer 2

第二种解决方案是创建另一个系列，其中包含所有月份的总值，用作边框。只需将此系列链接到包含require()属性的“Leaves”系列，将其linkedTo设置为透明，设置不同的color值并禁用stack。您还可以使用grouping属性关闭此系列的鼠标跟踪。

API参考：
http://api.highcharts.com/highcharts/plotOptions.column.grouping
http://api.highcharts.com/highcharts/plotOptions.column.linkedTo

例：
http://jsfiddle.net/8Ljmv4ud/

从多个Stacked and Grouped Column图表（Highcharts.js）中删除边框

2 个答案: