jQuery flot图表 - 更改y轴标签(刻度)

7

我需要能够根据另一个标签数组更改(水平)条形图的标签/刻度 - 这是名称解析器的一部分。

因此,我的初始化代码大致如下:

var ticks = [
  ["abc", 0],
  ["def", 1],
  ["ghi", 2],
  ["jkl", 3]
];

//loop for each value goes here
var data = {
  data: [
    [0, 111],
    [1, 222],
    [2, 333],
    [3, 444]
  ], //... etc
  bars: {
    horizontal: true,
    show: true,
    barWidth: 0.8,
    align: "center"
  }
};

var plot = $.plot($("#graph"), data, {
  yaxis: {
    ticks: ticks
  }
  //etc
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.flotcharts.org/javascript/jquery.flot.min.js"></script>

<div class="chart" id="graph" style="width:400px;height:300px;"></div>

有没有一种方法可以更新柱状图,而不必销毁旧图形然后创建一个新图形?-像这样的东西?
//New ticks for y-axis
plot.yaxisticks = [["ABC", 0], ["DEF", 1], ["GHI", 2], ["JKL", 3]];
plot.draw();

编辑:
所以我可以通过 plot.getOptions().yaxis.ticks[i][1] = value 设置值,但似乎无法使用 plot.setupGrid() 重新绘制刻度。有助于吗?


似乎getOptions()方法在重绘时并没有实际改变标签/刻度的值。我敢打赌,如果你改变其他值,比如最大值和最小值,它们会起作用。 - ChiMo
3个回答

4
您可以为 y 轴指定刻度数组。 https://github.com/flot/flot/blob/master/API.md#customizing-the-axes

$(function () {
    
    var ticks = [[0, "abc"], [1, "def"], [2, "ghi"], [3, "jkl"], [4, "four"]];
    var data = [[111, 1], [222, 2], [333, 3],  [444, 4]];
    
    var plot1 = $.plot($("#graph"), [{ data: data, label: "Series A"}], {
    series: {
        legend : {
            show: true
        },
        bars: {
         horizontal: true,
         show: true,
         barWidth: 0.8,
         align: "center"
      },
        points : {
            show : true
        }
    },
    yaxis : {
        ticks: ticks
    }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.flotcharts.org/javascript/jquery.flot.min.js"></script>

<div class="chart" id="graph" style="width:400px;height:300px;"></div>


1
标签可以通过plot.getAxes().yaxis.options.ticks进行更改,然后重新绘制图。
function test() {
    var ticks = plot.getAxes().yaxis.options.ticks;

    for (var i = 0; i < ticks.length; i++ ){
        ticks[i][1] += " test";
    }

    plot.setupGrid();
    plot.draw();
}

以上代码将会把 " test" 添加到该标签的末尾。

0
在您的#graph容器div元素中,还有包含标签的其他div元素。您可以直接在DOM中访问和更改这些元素,而无需使用setupGrid()方法。但是,您还应该更改选项中的值以使它们保持同步。
标签div元素看起来像这样:
<div class="tickLabels" style="font-size:smaller">
    <div class="xAxis x1Axis" style="color:#545454">
        <div class="tickLabel" style="position:absolute;text-align:center;left:-44px;top:761px;width:138px">1</div>
        <div class="tickLabel" style="position:absolute;text-align:center;left:841px;top:761px;width:138px">2</div>
        <div class="tickLabel" style="position:absolute;text-align:center;left:1726px;top:761px;width:138px">3</div>
    </div>
    <div class="yAxis y1Axis" style="color:#545454">
        <div class="tickLabel" style="position:absolute;text-align:right;top:749px;right:1781px;width:18px">0</div>
        <div class="tickLabel" style="position:absolute;text-align:right;top:393px;right:1781px;width:18px">10</div>
        <div class="tickLabel" style="position:absolute;text-align:right;top:37px;right:1781px;width:18px">20</div>
    </div>
</div>

要更改标签的文本,请使用类似以下方式的方法

for (var i = 0; i < ticks.length; i++) {
    $('#graph div.y1axis div.tickLabel').eq(i).text(ticks[i]);
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接