自定义剑道折线图答案

【问题标题】：Customize Kendo Line Chart自定义剑道折线图
【发布时间】：2015-08-31 07:10:09
【问题描述】：

我想自定义剑道折线图如下：

我想在剑道折线图的右侧显示堆积条形图。

有什么方法可以使用 MVC 实现这一点

【问题讨论】：

标签： kendo-ui kendo-asp.net-mvc kendo-chart

【解决方案1】：

除了激光 X 值之外，您可以为条形设置 null 值：

DEMO

$("#chart").kendoChart({
    title: {
        text: ""
    },
    legend: {
        visible: false
    },
    seriesDefaults: {
        type: "column",
        stack: true
    },
    series: [{
        name: "zone1",
        data: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, 45],
        color: "#f3ac32"
    }, {
        name: "zon2",
        data: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, 25],
        color: "#b8b8b8"
    }, {
        name: "zone3",
        data: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, 30],
        color: "#bb6e36"
    },
    {
        name: "The Line",
        data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
        color: "#111111",
         type: "line"
    }],
    valueAxis: {
        max: 100,
    },
    categoryAxis: {
        categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
        majorGridLines: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        template: "#= series.name #: #= value #"
    }
});

或者，您可以并排放置 2 个图表，在值轴上具有相同的最小值和最大值。

【讨论】：