简体   繁体   中英

flot selection / highlighting - need to have simple value, not range

I have a flot chart and need to select / highlight one value. Selection requires to set "from-to" range, is it easy to do with static data, but when data set is changed from 0..0.1 till 0..100000 I have to calculate this range to set range to show as line. I don't need to have a selected range at all, I want to select by simple line! Is it possible?

        var hoursPerTmpForSelection = hoursPer + 1;
        if (hoursPer > 300)
            hoursPerTmpForSelection = hoursPer + 10;
        else if (hoursPer > 100)
            hoursPerTmpForSelection = hoursPer + 6;
        else if (hoursPer > 50)
            hoursPerTmpForSelection = hoursPer + 4;
        else if (hoursPer > 10)
            hoursPerTmpForSelection = hoursPer + 1;
    else if (hoursPer > 1)
            hoursPerTmpForSelection = hoursPer + 0.5;
        else if (hour <=1)
            hoursPerTmpForSelection = hoursPer + 0.2;

        $.plot("#daytimeChart", [daytimeData], {
            series: {
                bars: {
                    show: true,
                    barWidth: 0.8,
                    align: "center",
                    lineWidth: 0,
                    fillColor: "rgba(153, 153, 255, 0.6)"
                }
            },
            yaxes: [{
                axisLabel: 'Hours per week'
            }],
            xaxis: {
                mode: "categories",
                tickLength: 0,
                font: {
                    lineheight: 0,
                    size: 0
                }
            },
            selection: { mode: "y" }
        }).setSelection({ yaxis: { from: hoursPer, to: hoursPerTmpForSelection } });

if I set little "hoursPerTmpForSelection" value - line is not shown at all, if I set too much - line is very thick

I draw on image how I want to do it

http://magicscreenshot.blob.core.windows.net/screenshots/giFYyhXdz0A.jpg

What you describe sounds more like markings than a selection (see this example and the documentation ). Expand your options to include something like this:

grid: { markings: [
    { color: #888, lineWidth: 1, yaxis: { from: 320, to: 320 } }
] }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM