Квадратная диаграмма/диаграмма диаграммы jqplot

Question

Мне нужно построить 3 серии данных, первая строка, а остальные 2 - только точки. Однако линия должна быть ступенчатой ​​схема (вместо линии чертежа от точки к точке, она должна нарисовать линию по горизонтали, а затем до значения

Я застрял о том, как получить это с JQPlot.

$(document).ready(function(){ 
    var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]); 
}); 

Приведенный выше код будет производить синяя линия на графике ниже, а мне нужна зеленая линия.

Answer 1

Вы должны указать как х и у значения для каждой точки на графике. Трудность в том, что если два точки имеют одинаковое значение x, jqplot может отменить их, что приводит к тому, что выглядит как треугольник, а не квадрат. Итак, решение состоит в том, чтобы взять каждую точку после первого, вычесть небольшую сумму из значения x (в моем примере, 0.001) и сделать так, чтобы значение x для новой точки имело то же значение y, что и точка перед ним , Вот пример с жестким кодом:

var plot1 = $.jqplot ('chart1', [[ 
    [1,3], [1.999,3], 
    [2,7], [2.999,7], 
    [3,9], [3.999,9], 
    //... 
]]); 

Try it in a fiddle.

Чтобы создать такой список в коде, просто цикл по исходному набору данных и добавить необходимые дополнительные шаги:

var data = [3,7,9,1,4,6,8,2,5]; 
var points = [[1, data[0]]], len = data.length; 
for (var i = 1; i < len; i++) { 
    points.push([i + .999, data[i - 1]]); 
    points.push([i + 1, data[i]]); 
} 

var plot1 = $.jqplot ('chart1', [points]); 

Try it in an updated fiddle.

Answer 2

К сожалению, я не могу комментировать. Поэтому я должен написать новый ответ.

В приведенном ответе предлагается вычесть небольшое количество из значения x (0,001 в этом примере), чтобы предотвратить эффект треугольника. Но это не совсем точно и может рассматриваться только как обходное решение.

Треугольный эффект вызван сортировкой, выполняемой jqPlot. Сортировка требуется для большинства типов диаграмм, включая линейные диаграммы. Если данные уже отсортированы перед подачей на jqPlot, сортировка может быть отключена для jqPlot, установив атрибут sortData в значение false, см. jqPlot.sortData

Это предотвратит проблемы сортировки и, следовательно, не будет иметь эффекта треугольника!

Вы также можете скрыть маркеры точек, так как jqPlot не знает разницы между реальными точками и нашими искусственными точками.

var data = [3, 7, 9, 1, 4, 6, 8, 2, 5]; 
var points = [[1, data[0]]]; 
for (var i = 1; i < data.length; i++) { 
    points.push([i + 1, data[i - 1]]); 
    points.push([i + 1, data[i]]); 
} 

var plot1 = $.jqplot('chart1', [points], { 
    sortData: false, 
    seriesDefaults: { 
     showMarker: false 
    } 
}); 

Try it in a fiddle

Если вы хотите получить также маркеры точки вправо, единственный вариант я вижу изменения логики визуализации, например, написав плагин диаграммы шагов.

Для справки см также ответы на следующие сообщение: jqPlot step chart not plotting in series order