使用kendoUI绘制垂直折线图

Question

我需要绘制一个看起来像 this 的图表。它在垂直线上放置数据。我需要使用 Kendo UI for jQuery 来实现这一点。我是 Kendo UI

的新手

在 Kendo UI 网站上的这个 documentation 之后，我开始按如下方式进行

$("#chart").kendoChart({
                title: {
                    text: "Capacity versus Depth",
                    font: "13px",
                },
                legend: {
                    position: "bottom",
                    labels: {
                        font: "13px"
                    }
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "line",
                    style: "smooth"
                },
                series: [{
                    name: "Fixed Jc Capacity (Kips)",
                    data: [17.00, 27.00, 37.00, 47.00, 57.00, 67.00, 77.00, 87.00, 97.00, 107.00]
                }, {
                    name: "UF Total Capacity (Kips)",
                    data: [17.00, 27.00, 37.00, 47.00, 57.00, 67.00, 77.00, 87.00, 97.00, 107.00]
                }, {
                    name: "Minimum Tip Elevation",
                    data: [17.00, 27.00, 37.00, 47.00, 57.00, 67.00, 77.00, 87.00, 97.00, 107.00]
                }, {
                    name: "Nominal Bearing Resistance",
                    data: [17.00, 27.00, 37.00, 47.00, 57.00, 67.00, 77.00, 87.00, 97.00, 107.00]
                }, {
                    name: "UF Tip Capacity (Kips)",
                    data: [17.00, 27.00, 37.00, 47.00, 57.00, 67.00, 77.00, 87.00, 97.00, 107.00]
                }],
                valueAxis: {
                    labels: {
                        format: "{0}%",
                        font: "13px",
                        data: [17.00, 27.00, 37.00, 47.00, 57.00, 67.00, 77.00, 87.00, 97.00, 107.00]
                    },
                  
                        title: {
                            text: "Displacement (Feet)",
                            font: "13px"
                    },
                                        
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10,
                },
                categoryAxis: {
                    categories: [0.00, 100.00, 200.00, 300.00, 400.00, 500.00, 600.00, 700.00, 800.00, 900.00, 1000.00],
                    majorGridLines: {
                        visible: false
                    },
                    title: {
                        text: "Capacity (Kips)",
                        font: "13px"
                    },
                    labels: {
                        rotation: "auto",
                        font: "13px"
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });

结果看起来像 this，它以水平线显示数据，但我需要它与我的第一张图像匹配，该图像以垂直线显示数据

有人可以帮助我如何使用 Kendo UI 实现垂直线图吗？

Answer 1

您是否尝试添加系列类型：verticalLine

 series: [
    { type: "verticalLine", data: [1, 2] }
  ]

看到这个documentation

使用kendoUI绘制垂直折线图

Using kendo UI draw vertical line chart

jquery

kendo-ui

asp.net-core