剑道条形图 - 两个窗格中的情节带

Posted 2021-05-03

我有一个带2个窗格的条形图。我想在两个窗格中添加绘图带，但颜色不同。如何才能做到这一点？我想在图表的底部显示类别标签。如何才能做到这一点？

这是jsfiddle的例子：http://jsfiddle.net/An59E/27/

html代码：

<div id="chart"></div>

JS代码：

var series1= [70, 60, 40, 90, -10, 50];
var series2= [-50, 40, 20, -80, 70, 80];
var series3= [70, 60, -40, 90, 10, 50];
var series4= [-50, 40, 20, -80, 70, 80];

$("#chart").kendoChart({
  series: 
    [
        {
            data: series1,   
            color: "#00CC00",
            negativeColor: "#CC0000"
        },                 
        {    
            data: series2, 
            color: "#CCCCCC"    
        },
        {   
            data: series3,  
            axis: "bottom" , 
            color: "#00CC00", 
            negativeColor: "#CC0000"
        },
        {   
            data: series4,  
            axis: "bottom" , 
            color: "#CCCCCC" 
        }
    ],
    categoryAxis: 
    [
        {
            pane: "top-pane",
            color: "#0099FF",
            majorGridLines:
            {
                visible: true,

            },
            line: {
                width: 3,
            },
            plotBands: 
            [
                {from: 0, to:1, color: "#CCCCCC"},
            ]
        },
        {
            pane: "bottom-pane",
            color: "#0099FF",
            majorGridLines:
            {
                visible: true
            },
                line: {
                width: 3,
                },

            labels: 
            {
                margin: 
                {
                    top: 80,
                    bottom: 0
                }
            },
                categories: [2005, 2006, 2007, 2008, 2009],

        }
    ],
    seriesDefaults: 
        {
         type: "column",
            labels: 
            {    
                visible: true,
                color: "green"
            },

        }, 
    valueAxis: [
        { 
            pane: "top-pane", 
            title:
            { 
                text: "Availability"  
            },  
            majorGridLines: 
            { 
                visible: false 
            },
            labels: 
            {    
                visible: false,      
            },
            line:
            {
                visible: false
            }
        },
        { 
            pane: "bottom-pane", 
            name: "bottom",
            title:
            { 
                text: "Occupancy"  
            },
            majorGridLines: 
            { 
                visible: false 
            },
            labels: 
            {    
                visible: false,
            },
            line:
            {
                visible: false
            }
        }
    ],
    panes: 
    [
        { 
            name: "top-pane",
            border: {
                color: "#C0C0C0",
                width: 1
            },
        },
        {             
            name: "bottom-pane",
            border: {
                color: "#C0C0C0",
                width: 1
            }
        }
    ],
    tooltip: {
            visible: true,
            format: "{0}"
        }
});

谢谢。

答案

要在两个窗格中添加绘图带：

            plotBands: [
            {
                from: 95,
                to: 100,
                color: "#2082c8"
                //color: "url(#pattern2)",
            },
            {
                from: 125,
                to: 130,
                color: "#c82020"
            }