Question

我最近开始使用Kendo-UI。

我有以下条形图。我想添加连接条形图的绘制线，如第二张图所示。

以下是我所拥有的： enter image description here

这是我希望实现的目标： enter image description here

 function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Hybrid car mileage report"
                },
                legend: {
                    position: "top"
                },
                series: [{
                    type: "column",
                    data: [20, 40, 45, 30, 50],
                    stack: true,
                    name: "on battery",
                    color: "#003c72"
                }, {
                    type: "column",
                    data: [20, 30, 35, 35, 40],
                    stack: true,
                    name: "on gas",
                    color: "#0399d4"
                }],
                valueAxes: [{
                    title: { text: "miles" },
                    min: 0,
                    max: 100
                }],
                categoryAxis: {
                    categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
                    axisCrossingValues: [0, 0, 10, 10]
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);

这是我的jsfiddle：http://jsfiddle.net/mskjbLwx/

Answer 1

添加另外两个类型为：line的系列连接栏。请参阅示例：JSFiddle，可能对您有帮助。

＆＃13;

function createChart() {
    $("#chart").kendoChart({
        title: {
            text: "Hybrid car mileage report"
        },
        legend: {
            position: "top"
        },
        transitions: true,
        series: [{
            type: "line",
            missingValues: "interpolate",
            markers: {
                visible: false
            },
            data: [10, 20, 30, 40, 50],
            stack: true,
            tooltip: {
                visible: true
            },
            name: "on battery",
            color: "orange",
            visibleInLegend: false
        }, {
            type: "column",
            data: [10, 20, 30, 40, 50],
            stack: true,
            name: "on battery",
            color: "#003c72"
        }, {
            type: "line",
            missingValues: "interpolate",
            markers: {
                visible: false
            },
            data: [5, 15, 25, 35, 45],
            stack: true,
            tooltip: {
                visible: true
            },
            name: "on gas",
            color: "green",
            visibleInLegend: false
        }, {
            type: "column",
            data: [5, 15, 25, 35, 45],
            stack: true,
            name: "on gas",
            color: "#0399d4"
        }],
        valueAxes: [{
            title: {
                text: "miles"
            },
            min: 0,
            max: 100
        }],
        categoryAxis: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
            axisCrossingValues: [0, 0, 10, 10]
        },
        tooltip: {
            visible: true,
            format: "{0}%",
            template: "#= series.name #: #= value #"
        }
    });
}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);

＆＃13;

 { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

＆＃13;

 <base href="http://demos.telerik.com/kendo-ui/area-charts/multiple-axes">
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js">   </script>
<body>
<div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>

＆＃13;

如何在Kendo-UI中绘制条形图的连接线

1 个答案: