jquery flot图显示周天数_Jquery_Charts_Flot

jquery flot图显示周天数

jquery charts

jquery flot图显示周天数,jquery,charts,flot,Jquery,Charts,Flot,我正在尝试更新一周统计数据的flot图表如果我的代码带有数字，我可以将x轴值更改为周天数吗？类似地，我试图为月度图表显示月份中的天数。如何显示工作日名称而不是数字 <body> <div id="placeholder"></div> </body> $(document).ready(function () { var d1_1 = [ [1.0, 120], [2.0, 70],

我正在尝试更新一周统计数据的flot图表如果我的代码带有数字，我可以将x轴值更改为周天数吗？类似地，我试图为月度图表显示月份中的天数。如何显示工作日名称而不是数字

<body>
    <div id="placeholder"></div>
</body>


$(document).ready(function () {
    var d1_1 = [
        [1.0, 120],
        [2.0, 70],
        [3.0, 100],
        [4.0, 60],
        [5.0, 35]
    ];

    var d1_2 = [
        [1.0, 80],
        [2.0, 60],
        [3.0, 30],
        [4.0, 35],
        [5.0, 30]
    ];

    var d1_3 = [
        [1.0, 80],
        [2.0, 40],
        [3.0, 30],
        [4.0, 20],
        [5.0, 10]
    ];

    var d1_4 = [
        [1.0, 15],
        [2.0, 10],
        [3.0, 15],
        [4.0, 20],
        [5.0, 15]
    ];

    var data1 = [
        {
            label: "Product 1",
            data: d1_1,
            bars: {
                show: true,
                barWidth: 0.2,
                fill: true,
                lineWidth: 1,
                order: 1,
                fillColor:  "#AA4643"
            },
            color: "#AA4643"
        },
        {
            label: "Product 2",
            data: d1_2,
            bars: {
                show: true,
                barWidth: 0.2,
                fill: true,
                lineWidth: 1,
                order: 2,
                fillColor:  "#89A54E"
            },
            color: "#89A54E"
        },
        {
            label: "Product 3",
            data: d1_3,
            bars: {
                show: true,
                barWidth: 0.2,
                fill: true,
                lineWidth: 1,
                order: 3,
                fillColor:  "#4572A7"
            },
            color: "#4572A7"
        },
        {
            label: "Product 4",
            data: d1_4,
            bars: {
                show: true,
                barWidth: 0.2,
                fill: true,
                lineWidth: 1,
                order: 4,
                fillColor:  "#80699B"
            },
            color: "#80699B"
        }
    ];

    $.plot($("#placeholder"), data1, {
        xaxis: {
            min: 0.0,
            max: 6.0,
            //mode: null,
            ticks: [1.0, 2.0, 3.0, 4.0, 5.0],
            tickLength: 0, // hide gridlines
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            axisLabelPadding: 5
        },
        yaxis: {
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            axisLabelPadding: 5
        },
        grid: {
            hoverable: true,
            clickable: false,
            borderWidth: 1
        },
        legend: {
            labelBoxBorderColor: "none",
            position: "right"
        },
        series: {
            shadowSize: 1
        }
    });

    function showTooltip(x, y, contents, z) {
        $('<div id="flot-tooltip">' + contents + '</div>').css({
            top: y - 20,
            left: x - 90,
            'border-color': z,
        }).appendTo("body").show();
    }

    $("#placeholder").bind("plothover", function (event, pos, item) {
        var previousPoint;
        if (item) {
            if (previousPoint != item.datapoint) {
                previousPoint = item.datapoint;
                $("#flot-tooltip").remove();

                var originalPoint;

                if (item.datapoint[0] == item.series.data[0][3]) {
                    originalPoint = item.series.data[0][0];
                } else if (item.datapoint[0] == item.series.data[1][3]){
                    originalPoint = item.series.data[1][0];
                } else if (item.datapoint[0] == item.series.data[2][3]){
                    originalPoint = item.series.data[2][0];
                } else if (item.datapoint[0] == item.series.data[3][3]){
                    originalPoint = item.series.data[3][0];
                } else if (item.datapoint[0] == item.series.data[4][3]){
                    originalPoint = item.series.data[4][0];
                }

                var x = originalPoint;
                y = item.datapoint[1];
                z = item.series.color;

                showTooltip(item.pageX, item.pageY,
                    "<b>" + item.series.label + "</b><br /> " + x + " = " + y,
                    z);
            }
        } else {
            $("#flot-tooltip").remove();
            previousPoint = null;
        }            
    });

});


body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#placeholder { width: 450px; height: 200px; position: relative; margin: 0 auto; }
.legend table, .legend > div { height: 82px !important; opacity: 1 !important; right: -55px; top: 10px; width: 116px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
#flot-tooltip { font-size: 12px; font-family: Verdana, Arial, sans-serif; position: absolute; display: none; border: 2px solid; padding: 2px; background-color: #FFF; opacity: 0.8; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }


$（文档）.ready（函数（）{
变量d1_1=[
[1.0, 120],
[2.0, 70],
[3.0, 100],
[4.0, 60],
[5.0, 35]
];
变量d1_2=[
[1.0, 80],
[2.0, 60],
[3.0, 30],
[4.0, 35],
[5.0, 30]
];
变量d1_3=[
[1.0, 80],
[2.0, 40],
[3.0, 30],
[4.0, 20],
[5.0, 10]
];
变量d1_4=[
[1.0, 15],
[2.0, 10],
[3.0, 15],
[4.0, 20],
[5.0, 15]
];
变量数据1=[
{
标签：“产品1”，
数据：d1_1，
酒吧：{
秀：没错，
条宽：0.2，
填充：是的，
线宽：1，
订单：1，
填充颜色：“AA4643”
},
颜色：“AA4643”
},
{
标签：“产品2”，
数据：d1_2，
酒吧：{
秀：没错，
条宽：0.2，
填充：是的，
线宽：1，
订单：2，
填充颜色：“89A54E”
},
颜色：“89A54E”
},
{
标签：“产品3”，
数据：d1_3，
酒吧：{
秀：没错，
条宽：0.2，
填充：是的，
线宽：1，
订单：3，
填充颜色：“4572A7”
},
颜色：“4572A7”
},
{
标签：“产品4”，
数据：d1_4，
酒吧：{
秀：没错，
条宽：0.2，
填充：是的，
线宽：1，
订单：4，
填充颜色：“80699B”
},
颜色：“80699B”
}
];
$.plot（$（“#占位符”），数据1{
xaxis：{
最小值：0.0，
最高：6.0，
//模式：空，
滴答声：[1.0,2.0,3.0,4.0,5.0]，
tickLength:0，//隐藏网格线
Axislabulusecanvas：没错，
axisLabelFontSizePixels:12，
Axislabelfont家族：“Verdana、Arial、Helvetica、Tahoma、sans serif”，
axisLabelPadding:5
},
亚克斯：{
Axislabulusecanvas：没错，
axisLabelFontSizePixels:12，
Axislabelfont家族：“Verdana、Arial、Helvetica、Tahoma、sans serif”，
axisLabelPadding:5
},
网格：{
悬停：是的，
可点击：false，
边框宽度：1
},
图例：{
labelBoxBorderColor:“无”，
位置：“右”
},
系列：{
阴影大小：1
}
});
函数显示工具提示（x、y、内容、z）{
$（''+内容+''）.css({
上图：y-20，
左:x-90,，
“边框颜色”：z，
}).appendTo（“body”）.show（）；
}
$（“#占位符”）.bind（“plothover”，函数（事件、位置、项目）{
var前一点；
如果（项目）{
if（上一个点！=item.datapoint）{
previousPoint=item.datapoint；
$（“#flot工具提示”）.remove（）；
变异原点；
if（item.datapoint[0]==item.series.data[0][3]）{
originalPoint=item.series.data[0][0]；
}else if（item.datapoint[0]==item.series.data[1][3]）{
originalPoint=item.series.data[1][0]；
}else if（item.datapoint[0]==item.series.data[2][3]）{
originalPoint=item.series.data[2][0]；
}else if（item.datapoint[0]==item.series.data[3][3]）{
originalPoint=item.series.data[3][0]；
}else if（item.datapoint[0]==item.series.data[4][3]）{
originalPoint=item.series.data[4][0]；
}
var x=原始点；
y=项目数据点[1]；
z=item.series.color；
显示工具提示（item.pageX、item.pageY、，
“+item.series.label+”
“+x+”=“+y，
z） )；
}
}否则{
$（“#flot工具提示”）.remove（）；
previousPoint=null；
}            
});
});
正文{字体系列：Verdana，Arial，无衬线；字体大小：12px；}
#占位符{宽度：450px；高度：200px；位置：相对；边距：0自动；}
.legend表格.legend>div{高度：82px！重要；不透明度：1！重要；右侧：-55px；顶部：10px；宽度：116px！重要；}
.图例表{边框：1px实心#555；填充：5px；}
#flot工具提示{字体大小：12px；字体系列：Verdana，Arial，无衬线；位置：绝对；显示：无；边框：2px实心；填充：2px；背景色：#FFF；不透明度：0.8；-moz边框半径：5px；-webkit边框半径：5px；-khtml边框半径：5px；边框半径：5px；}

将您的

xaxis

勾选数组修改为：

ticks: [[1.0,"Monday"], [2.0,"Tuesday"], [3.0,"Wednesday"], [4.0,"Thursday"], [5.0,"Friday"]],

更新小提琴