Question

我使用JQPLot绘制图，但日期的x轴定义不起作用......

我使用了以下选项，

        axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}},

但它仍然失败。任何输入？

<html>
<head>

</head>
<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script type="text/javascript" src="c:/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="c:/jquery/dist/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="c:/jquery/dist/plugins/jqplot.bubbleRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="c:/jquery/dist/jquery.jqplot.min.css" />


<script>

$(document).ready(function(){

    //var arr = [[11, 123, 1236, "Acura"], [45, 92, 1067, "Alfa Romeo"],
    //[24, 104, 1176, "AM General"], [50, 23, 610, "Aston Martin Lagonda"],
    //[18, 17, 539, "Audi"], [7, 89, 864, "BMW"], [2, 13, 1026, "Bugatti"]];

    //var arr = [[100,158.73,1,{"label":"WINNER, INC."}]
        //,[200,58.73,1,{"label":"A, INC."}]
        //,[300,358.73,1,{"label":"B, INC."}]
    //,[400,458.73,1,{"label":"C, INC."}]]

    var arr = [["2013-08-19",158.73,1,{"label":"WINNER, INC."}]
        ,["2011-0-19",58.73,1,{"label":"A, INC."}]
        ,["2012-08-19",,358.73,1,{"label":"B, INC."}]
    ,["2018-08-19",,458.73,1,{"label":"C, INC."}]]






    plot1 = $.jqplot('chartdiv',[arr],{
        title: 'Transparent Bubbles',
        seriesDefaults:{
            renderer: $.jqplot.BubbleRenderer,
            axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}},
            rendererOptions: {
                bubbleAlpha: 0.6,
                highlightAlpha: 0.8
            },
            shadow: true,
            shadowAlpha: 0.05
        },


    });
});


</script>

<div id="chartdiv" style="height:400px;width:300px; "></div>

</body>
</html>

Answer 1

jsFiddle link

<强> HTML：

<div id="chartdiv" style="height:400px;width:300px; "></div>

<强> JavaScript的：

$(document).ready(function () {
    var arr = [
        ["2013-08-19 4:00PM", 158.73,1, {
            "label": "WINNER, INC."
        }],
        ["2011-08-19 4:00PM", 58.73,1, {
            "label": "A, INC."
        }],
        ["2012-08-19 4:00PM", 358.73,1, {
            "label": "B, INC."
        }],
        ["2018-08-19 4:00PM", 458.73,1, {
            "label": "C, INC."
        }]
    ]

    plot1 = $.jqplot('chartdiv', [arr], {
        title: 'Transparent Bubbles',
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer
            }
        },
        seriesDefaults: {
            renderer: $.jqplot.BubbleRenderer,
            rendererOptions: {
                bubbleAlpha: 0.6,
                highlightAlpha: 0.8
            },
            shadow: true,
            shadowAlpha: 0.05
        }
    });
});

JQPlot在x轴上的日期

1 个答案: