剑道图表在 y 轴上以 dd/MM/yyyy 显示日期

Question

我正在开发 Angular js 应用程序并实现剑道图表，我想在剑道图表的 y 轴上以dd/MM/yyyy 显示日期，如下图所示， 我还没有找到任何解决方案。 请为此提供示例代码或 plunker 链接

以下是示例代码

HTML 页面

<div kendo-chart
                 k-legend="{ position: 'top' }"
                 k-series-defaults="model.graphSettings"
                 k-series="[
                                 { field: 'value', name: 'Budget BaseLine' },
                                 { field: 'value1', name: 'Budget Real' }]"
                 k-data-source="model.chartDataSource1"
                 k-category-axis="{labels:{rotation:-45}, title:{text: 'Budget Type'}}"
                    k-value-axis="{title:{text:'Date'}}"
                 k-rebind="model.chartDataSource1"
                 k-tooltip="{visible: true, template: '#= category #: #= value#'}"
                 style="height: 300px;">
            </div> 

角度js控制器

 scope.model.graphSettings = {
            type: 'column'
        };
 var obj = [];
        obj.push({
            category: "Category 1",
            value: new Date(),
            value1: new Date(),

        }, {
            category: "Category 2",
            value: new Date(),
            value1: new Date(),

        })

        scope.model.chartDataSource1 = new kendo.data.DataSource({
            data: obj
        });

Answer 1

在 Y 轴上有日期有点奇怪 - 通常日期在 X 轴上。

要实现您在图像中显示的内容，您需要将带有模板定义的labels 部分添加到图表小部件的valueAxis 选项中。这是一个例子：

<div kendo-chart
    k-legend="{ position: 'top' }"
    k-series-defaults="model.graphSettings"
    k-series="[{ field: 'value', name: 'Budget BaseLine' },
               { field: 'value1', name: 'Budget Real' }]"
    k-data-source="model.chartDataSource1"
    k-category-axis="{labels:{rotation:-45}, title:{text: 'Budget Type'}}"
    k-value-axis="{title:{text:'Date'}, labels: {template: '#= kendo.toString(new Date(value),\'dd/MM/yyyy\') #'}}"
    k-rebind="model.chartDataSource1"
    k-tooltip="{visible: true, template: '#= category #: #= value#'}"
                 style="height: 300px;">
</div>

这假定您的日期采用 JavaScript 日期解析器可以解析的格式，如下所述：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse