javascript - jQuery flot chart - change labels (ticks) of y-axis - Stack Overflow

admin管理员组

文章数量:1290309

I need to be able to change the labels/ticks of a (horizontal) bar chart based on another array full of labels. - this is part of a name resolver thingy.

So my initalization code looks around the lines of so:

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=".9.1/jquery.min.js"></script>
<script src=".flot.min.js"></script>

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

I need to be able to change the labels/ticks of a (horizontal) bar chart based on another array full of labels. - this is part of a name resolver thingy.

So my initalization code looks around the lines of so:

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.flotcharts/javascript/jquery.flot.min.js"></script>

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

Is there any way of updating the bar chart without destroying old graph and then creating a new one? - so something like this?:

//New ticks for y-axis
plot.yaxisticks = [["ABC", 0], ["DEF", 1], ["GHI", 2], ["JKL", 3]];
plot.draw();

EDIT:
So I can set the values through plot.getOptions().yaxis.ticks[i][1] = value but it seems like it cannot re-draw the ticks using plot.setupGrid(). Help?

• javascript
• jquery
• flot

Share Improve this question Follow edited Oct 10, 2020 at 4:01 Ruslan López 4,47722 gold badges3030 silver badges4040 bronze badges asked Jun 22, 2015 at 2:50 Melissa ZachariadisMelissa Zachariadis 12911 silver badge88 bronze badges 1

• It seems that the getOptions() method does not actually change the values for the labels/ticks on redraw. I bet if you change other values such as the max and min - they would work. – ChiMo Commented Jun 22, 2015 at 5:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can specify ticks array for yaxis.

https://github./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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.flotcharts/javascript/jquery.flot.min.js"></script>

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

The labels can be changed through plot.getAxes().yaxis.options.ticks, then redrawing the plot.

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();
}

The above code will add " test" to the end of the label.

In your #graph container div element are further div elements which contain the labels. You can access and change these directly in the DOM without using the setupGrid() method. But you should also change the values in the options to keep them in sync.

The label div elements look something like this:

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

To change the text of the labels use something like

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

本文标签： javascriptjQuery flot chartchange labels (ticks) of yaxisStack Overflow