Question

我正在尝试获取带有日期的x轴。 x数据是时间戳。不知怎的，我无法做对。

该行的值如下：

line = [[1334856823000, 2], [1334856853000, 1], [1334856883000, 0], [1334856913000,4],[1334856914000, 13], [1334856943000, 16], [1334856973000, 23], [1334857003000, 24], [1334857033000, 36], [1334857063000, 14], [1334857093000, 1]]

            $.jqplot('container', [line],
              { title: "Snelheidsgrafiek",
                axes: {
                  xaxis: {
                    rederer: $.jqplot.DateAxisRenderer,
                    rendererOptions: {tickRenderer: $.jqplot.canvasAxisTickRenderer},
                    tickOptions: {formatString: '%H:%M'}
                  },
                  yaxis: {
                    min: 0
                  }
                }
            });

现在它只显示%H:%M作为标签。我尝试了很多变化，但无法实现。

Answer 1

在这里。您的问题是tickRenderer: $.jqplot.CanvasAxisTickRenderer应与renderer处于同一级别，而不是rendererOptions内。

Please see the jsfiddle.

修改

此外，您错过CanvasTextRenderer使用的CanvasAxisTickRenderer导入，而您忘记以大写字母C开头，如下所示：$.jqplot.CanvasAxisTickRenderer。

Answer 2

试一试。这是从工作代码中匆忙复制的。我剥离了很多东西给你一个更好的概述。也许它在这里和那里缺少一个括号，但它应该让你知道要设置什么以及受影响的变量。这肯定是100％工作。

确保包含所需的Javascript库。

如果您需要更多详情，请与我们联系......

<script type="text/javascript">(function($) {
            var indizes;
            var plot1; 
            $(document).ready(function() {
                $(function() {
                   $(document).ready(function() {
indizes = [["2011-12-31",0.00],["2012-01-31",6.25],["2012-02-28",12.56],["2012-03-31",17.62],["2012-04-30",18.72],["2012-05-31",12.44],["2012-06-30",15.14],["2012-07-31",20.27],["2012-08-31",20.82],["2012-09-30",24.47],["2012-10-31",25.68],["2012-11-30",26.41],["2012-12-31",28.43],["2013-01-31",32.76],["2013-02-28",36.82],["2013-03-31",42.29],["2013-04-30",43.14],["2013-05-31",45.87],["2013-06-30",40.68],["2013-07-31",50.58],["2013-08-31",46.00],["2013-09-29",56.20],["2013-10-02",55.40]];                            ;

            draw_first();

            function draw_first() {
                plot1 = $.jqplot("chartdiv", [indizes], {
                    seriesColors: ["rgba(0, 189, 255, 1)"],
                    title: '',
                    grid: {
                        background: 'rgba(57,57,57,0.0)',
                        drawBorder: false,
                        shadow: false,
                        gridLineColor: '#333',
                        gridLineWidth: 1
                    },
                    legend: {
                        show: true,
                        placement: 'inside',
                        location: 'nw'
                    },
                    seriesDefaults: {
                        rendererOptions: {
                            smooth: false,
                            animation: {
                                show: true
                            }
                        },
                        showMarker: true,
                        pointLabels: {show: pointlabels},
                        markerOptions: {
                            style: 'filledSquare'
                        }
                    },
                    series: [
                        {
                            label: 'Indizes'
                        }
                    ],
                    axesDefaults: {
                        rendererOptions: {
                            baselineWidth: 2,
                            baselineColor: '#444444',
                            drawBaseline: false
                        }
                    },
                    axes: {
                        xaxis: {
                            renderer: $.jqplot.DateAxisRenderer,
                            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                            tickOptions: {
                                formatString: "%b",
                                angle: 0,
                                textColor: '#888'
                            },
                            min: "2012-10-01",
                            max: "2013-10-31",
                            tickInterval: "1 month",
                            drawMajorGridlines: true
                        },
                        yaxis: {
                            renderer: $.jqplot.LinearAxisRenderer,
                            pad: 0,
                            rendererOptions: {
                                minorTicks: 1
                            },
                            drawMajorGridlines: false,
                            tickOptions: {
                                formatString: function() {
                                    return '%#.1f %';
                                }(),
                                showMark: false,
                                textColor: '#888'
                            }
                        }
                    }
                });
            } 

        })(jQuery);</script>

来自时间戳的jqplot日期轴

2 个答案: