javascript - float 条形图可点击的条显示不正确的信息

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']);
    }

float 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 .