Question

我正在研究角度js应用程序并实现剑道图表，我想在剑道图表中的y轴上G显示日期，如下图所示，我找不到任何解决方案了。请提供此示例代码或plunker链接

以下是示例代码

HTML页面

dd/MM/yyyy

angular js Controller

<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>

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

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

1 个答案: