Question

我正在尝试这样做，以便在单击图表上的条形图时，该特定条形图的x轴标签将打印出/显示在范围内。我的最终目标是，当点击一个条形时，在下面创建另一个条形图，显示有关该特定条形的更多详细信息，在第一个图形上查看广泛信息，单击一个条形时，将显示更详细的信息在下面的另一个条形图中。

我的数据库中的测试表：

x ------------- y
  0 ----------- 1000
  1 ----------- 2000
  2 ----------- 3000
  3 ----------- 4000
  4 ----------- 5000
  5 ----------- 6000
  6 ----------- 7000
  7 ----------- 8000
  8 ----------- 9000

查询：

   $sql = "SELECT * FROM flotTest";
   $result = mysqli_query($dbc3, $sql);

    while($row = mysqli_fetch_assoc($result))
    {
        $dataset1[] = array($row['x'],$row['y']);
    }

flot js：

     // BAR CHART
        var percentagehrs = [];
        for (var i = 0; i <= 8; i += 1){
        percentagehrs.push([i, parseInt(Math.random() * 200)]);
}
        var dataset = [{
            label: "Percentage Hours",
            data: percentagehrs,
            color: "#5482FF" }];

        //x-axis label and index pulled from database (testing purposes)
        //I'm thinking this might be where my issue is

        var ticks =  <?php echo json_encode($dataset1); ?>;

        $(document).ready(function () {
            $.plot($("#group-flot-placeholder"), dataset, {
            series: {
                bars: {
                    show: true,
                    clickable: true
                }
            },
            bars: {
                align: "center",
                barWidth: 0.8
            },
            xaxis: {
                axisLabel: "Job Number",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10,
                ticks: ticks
            },
            yaxis: {
                axisLabel: "Percent",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 3,
                tickFormatter: function (v, axis) {
                    return v + "%";
                }
            },
            grid: {
                clickable: true,
                hoverable: true,
                borderWidth: 2,
                backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
                markings: [ { xaxis: { from: -1, to: 12 }, yaxis: { from: 100, to: 300 }, color: "#FFA5A5" }]
            }
        });
            $("#group-flot-placeholder").UseTooltip();

            $("#group-flot-placeholder").bind("plotclick", function (event, pos, item) {
            if (item) {
                $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
                plot.highlight(item.series, item.datapoint); //Output here is: - click point 0(0 being the position of the first bar) in Percentage Hours
            }
        });

        });

我做错了什么，如何做到这一点，以便在点击特定栏时，我可以将数据从我的数据库拉到另一个特定栏下方的条形图中？

Answer 1

您没有说明<?php echo json_encode($dataset1); ?>解决了什么，但它应该采用以下形式：

var ticks = [[0,"A"],[1,"B"],[2,"C"],[3,"D"],[4,"E"],[5,"F"],[6,"G"],[7,"H"],[8,"I"]];

所以，在你的click回调中：

$("#group-flot-placeholder").bind("plotclick", function (event, pos, item) {
    if (item) {
        var tickClicked = item.series.xaxis.ticks[item.dataIndex].label;         
        $("#clickdata").text(tickClicked);
    }
});

这是fiddle demonstration。

flot条形图可点击条显示不正确的信息

1 个答案: