jquery - Kendo dataviz 图表 valueAxis 自定义标签

Question

我尝试在折线图中的 Y 轴上设置自定义标签，但没有成功。我在论坛搜索谷歌上查看了很多，但没有成功。 我最接近的解决方案是隐藏实际标签并使用 valueAxis.notes 代替。 我在注释中面临的问题是，它们直接放置在图表中的水平线上，这使得它们很难阅读，并且尝试使用位置选项似乎根本没有任何帮助。如果要使用注释，我希望将它们放置在行下方。 我宁愿能够将实际标签设置为我自己的字符串，这样它就不会显示“0”，而是显示“Lousy”、25 =“Bad”、50 =“Normal”等。

有人知道怎么做吗？

这是折线图的代码

var values = [{
    "Name": "Good",
    "DateReported": "2014-03-11",
    "valueX": 75
}, {}...{}...{}];

$('#chart').kendoChart({
    dataSource: {
            data: values
        },
        chartArea: {
            height: 350
        },
        title: {
            text: "Your score board"
        },
        legend: {
            visible: false
        },
        seriesDefaults: {
            type: "line",
            style: "smooth",
            labels: {
                visible: false,
            }
        },
        series: [{
            field: "valueX",
            name: "{0}",
            tooltip: {
                visible: true,
                template: "<b>Mood Score: </b>#= value #<br/><b>Mood: </b> #= dataItem.Name # "
            }
        }],
        valueAxis: {
            notes: {
                position: "bottom",
                icon: {
                    background: "orange"
                },
                data: [{
                    value: 0,
                    label: {
                        position: "outside",
                        text: "Lousy"
                    }
                }, {
                    value: 25,
                    label: {
                        position: "outside",
                        text: "Bad"
                    }
                }, {
                    value: 50,
                    label: {
                        position: "outside",
                        text: "Normal"
                    }
                }, {
                    value: 75,
                    label: {
                        position: "outside",
                        text: "Good"
                    }
                }, {
                    value: 100,
                    label: {
                        position: "outside",
                        text: "Awesome"
                    }
                }]
            },
            title: {
                visible: false
            },
            max: 100,
            majorUnit: 25,
            labels: {
                format: "{0}",
                visible: false,
            },
            line: {
                visible: false
            }
        },
        categoryAxis: {
            title: {
                visible: false
            },
            labels: {
                rotation: -45
            },
            field: "DateReported",
            majorGridLines: {
                visible: false
            }
        }
    });

这是一个 jsFiddle与我目前所处的位置，使用“valueAxis.notes”。

Answer 1

我自己解决了这个问题，通过将“值”设置为 5 而不是 0、30 而不是 25、55 而不是 50 等来抵消用作标签的注释。

所以我对 valueAxis 部分中的注释的设置如下所示:

notes: {
position: "bottom",
icon: {
    background: "orange",
    visible: false
},
line: {
    width: 0
},
data: [{
    value: 5, // instead of 0
    label: {
        position: "outside",
        text: "Lousy"
    }
}, {
    value: 30, // instead of 25
    label: {
        position: "outside",
        text: "Bad"
    }
}....

这是更新后的jsFiddle .

我希望这可以为任何剑道图表定制者提供一些启发:)尽管几乎没有人读过这个问题:P

干杯!