首页 > 解决方案 > 在屏蔽 ui 图表的 x 轴上显示日期时间

问题描述

我正在尝试显示带有日期时间 x 轴的图表,我为日期时间字段尝试了不同的格式,但它们都不起作用(不显示图表),除非我仅发送年份,例如:2019。下面是我正在使用的代码。我很感激这方面的任何帮助。问候纳德

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
   <link rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/chart/css/shield-chart.min.css" />
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script>

</head>
<body>
  <div id="chart"></div>  
</body>
</html>

//Fill datasource
        var industryPrices = [
            { x: '2009-11-09 00:00:00.000', y: 0.103 },
            { x: '2009-11-09 00:00:00.000', y: 0.105 },
            { x: '2009-11-09 00:00:00.000', y: 0.112 },
            { x: '2009-11-09 00:00:00.000', y: 0.111 }
        ];
    //Initialize the shield chart 
        $("#chart").shieldChart({
            theme: "light",
            exportOptions: {
                image: false,
                print: false
            },
            primaryHeader: {
                text: "Results chart"
            },
            chartLegend: {
                align: 'right',
                verticalAlign: 'top',
                renderDirection: 'vertical'
            },
            seriesSettings: {
                line: {
                    enablePointSelection: true,
                    pointMark: {
                        activeSettings: {
                            pointSelectedState: {
                                drawWidth: 4,
                                drawRadius: 4
                            }
                        }
                    }
                }
            },
            axisX: {
                axisType: 'datetime',
            },
            axisY: {
                title: {
                    text: "Results"
                }
            },
//Set data source for chart
            dataSeries: [{
                seriesType: 'line',
                collectionAlias: "Results",
                data: industryPrices
            }]
        });

标签: angularjschartsshieldui

解决方案


推荐阅读