我正在开发 Angular js 应用程序并实现剑道图表,我想在剑道图表的 y 轴上显示 dd/MM/yyyy
中的日期,如下图所示,
我还找不到任何解决方案。
请为此提供示例代码或插件链接
以下是示例代码
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>
Angular js Controller
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
});
最佳答案
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
关于javascript - kendo 图表在 y 轴上以 dd/MM/yyyy 显示日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43450822/