нарисовать флоат-график с полосой и линией

Я пытаюсь создать гистограмму с целевой линией, используя флот и jQuery.

Цель остается неизменной каждый месяц, в то время как данные перемещаются вверх и вниз. Я могу создавать полосы без проблем, но я не могу отобразить линию. Я не уверен, что мне не хватает

Я загрузил код, который вызывает у меня проблему здесь:

https://jsfiddle.net/bigbadbaboonboy/r7j0k9gz/

<div id="risla-graph" class="graph"></div>

#risla-graph {
margin: 0 auto;
text-align: center;
width: 80%;
height: 400px;
}

var datasets = [{"label":"ALL RiSLA","data":[{"0":1451606400000,"1":73.83},
{"0":1454284800000,"1":69.21},{"0":1456790400000,"1":88.33},
{"0":1459465200000,"1":85.99},{"0":1462057200000,"1":82.32},
{"0":1464735600000,"1":0}],"series":{"lines":{"show":false}},"idx":0},
{"label":"Target","color":"#006E2E","data":[{"0":1451606400000,"1":92},
{"0":1454284800000,"1":92},{"0":1456790400000,"1":92},
{"0":1459465200000,"1":92},{"0":1462057200000,"1":92},
{"0":1464735600000,"1":0}],"series":{"lines":
{"show":true,"steps":true,"linewidth":1}},"bars":{"show":false},"legend":
{"show":false},"idx":1}];

var options = {"series":{"stack":0,"lines":
{"show":false,"steps":false},"bars":{"show":true,"fill":1,"align":"center"
,"lineWidth":0,"barWidth":518400000.0000001}}
,"xaxis":{"mode":"time","timeformat":"%b %y"
,"tickSize":[1,"month"]},"yaxis":{"min":64.21,"max":97}
,"grid":{"clickable":true,"hoverable":true},"legend":{"show":false}};

plot = $.plot($('#risla-graph'),  datasets, options);

jquery graph bar-chart linegraph flot
person bigbadbaboonboy    schedule 28.06.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

В вашем массиве datasets вы заключаете свои параметры lines в объект series.

series: {
    lines: {
        show: true,
        steps: true,
        linewidth:1
    }
}

Правильный способ указания параметров строк в объекте данных — без объекта series (согласно api.md Flot):

{
    color: color or number
    data: rawdata
    label: string
    lines: specific lines options
    bars: specific bars options
    points: specific points options
    xaxis: number
    yaxis: number
    clickable: boolean
    hoverable: boolean
    shadowSize: number
    highlightColor: color or number
}

Я обновил ваш JSFiddle, чтобы он работал.

person mechenbier    schedule 28.06.2016
comment
Спасибо. Серия выноса помогла выйти на целевую линию. - person bigbadbaboonboy; 28.06.2016

arrow_upward
0
arrow_downward

Удалить

"lines": {"show": false, "steps": false}

от вашего options.

Обновлена ​​скрипка.

person Raidri    schedule 28.06.2016
comment
Спасибо. Это тоже сработало, хотя мне нужна была линия для шага, поэтому я использовал решение Мехенбира. - person bigbadbaboonboy; 28.06.2016