Question

我正在尝试在折线图中在Y轴上设置自定义标签，但没有成功。我在论坛搜索谷歌上看了一下ALOT没有任何成功。最接近解决方案的是隐藏实际标签并使用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。

我希望这可能会给任何剑道图表cusomizer带来一些启示:)尽管几乎没有人甚至读过这个问题：P

干杯！

Kendo dataviz chart valueAxis自定义标签

1 个答案: