Рисование нескольких строк с неперекрывающимися значениями Y

Question

Хорошо, поэтому я должен начать с того, что мы как бы нашли способ обойти это, создав нулевые значения для каждой строки, кроме той, которая была нарисована. Идея состоит в том, что мы рисуем уровни мощности (y) и частоту (x), но эти значения не должны пересекаться, за исключением очень редкого случая. Схемы C# и ASP.NET будут хорошо работать для этого, но мы пытаемся отойти от них, поскольку API визуализации Google чище, проще работать и поддерживать и быстрее.

Я попытался форматирования JSON таким образом, чтобы было несколько строк и столбцов, так это выглядело так:

{ 
    cols: [{id: 'A', label: 'NEW A', type: 'string'}, 
     {id: 'B', label: 'B-label', type: 'number'}, 
     {id: 'C', label: 'C-label', type: 'date'} 
     ], 
    rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}]}, 
     {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}]}, 
     {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}]} 
     ], 
    cols: [{id: 'A', label: 'NEW A', type: 'string'}, 
     {id: 'B', label: 'B-label', type: 'number'}, 
     {id: 'C', label: 'C-label', type: 'date'} 
     ], 
    rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}]}, 
     {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}]}, 
     {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}]} 
     ], 
} 

К сожалению, я решил, что это будет только сделать окончательный вывод, отображаемый в формате JSON, который, если вы думаете о том, как CSS выбирает что-то вроде JavaScript для JavaScript.

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

Тем не менее, кажется немного смешным, что значения x должны были бы перекрываться. Кто-нибудь нашел способ рисовать несколько строк, рассматривать вещи как отдельные серии или добавлять точки по значению x и y только с соответствующим элементом легенды? Я не нашел ничего подобного в их API или SO.

Answer 1

Каждая строка в вашем графике должна поступать из отдельной серии данных, поэтому, если вы хотите две строки, вам необходимо иметь две серии данных. Ось оси x не должна быть одинаковой для обоих, вы просто вставляете нулевые значения для серии, которые не имеют значения в конкретной точке оси x. Вот пример DataTable, который можно использовать, чтобы нарисовать две линии на графике:

{ 
    "cols":[ 
     {"id":"","label":"X","type":"number"}, 
     {"id":"","label":"Y1","type":"number"}, 
     {"id":"","label":"Y2","type":"number"} 
    ], 
    "rows":[ 
     {"c":[{"v":1},{"v":2},{"v":8}]}, 
     {"c":[{"v":2},{"v":null},{"v":6}]}, 
     {"c":[{"v":3},{"v":5},{"v":6}]}, 
     {"c":[{"v":4},{"v":0},{"v":null}]}, 
     {"c":[{"v":5},{"v":9},{"v":7}]}, 
     {"c":[{"v":6},{"v":7},{"v":2}]} 
    ] 
} 

увидеть его работы здесь: http://jsfiddle.net/asgallant/M7STT/

[Edit - альтернативную организацию]

Вы также можете организовать данные, как это, если его легче сделать для вас:

{ 
    "cols":[ 
     {"id":"","label":"X","type":"number"}, 
     {"id":"","label":"Y1","type":"number"}, 
     {"id":"","label":"Y2","type":"number"} 
    ], 
    "rows":[ 
     // Y1 data: 
     {"c":[{"v":1},{"v":2},{"v":null}]}, 
     {"c":[{"v":3},{"v":5},{"v":null}]}, 
     {"c":[{"v":4},{"v":0},{"v":null}]}, 
     {"c":[{"v":5},{"v":9},{"v":null}]}, 
     {"c":[{"v":6},{"v":7},{"v":null}]}, 
     // Y2 data: 
     {"c":[{"v":1},{"v":null},{"v":8}]}, 
     {"c":[{"v":2},{"v":null},{"v":6}]}, 
     {"c":[{"v":3},{"v":null},{"v":6}]}, 
     {"c":[{"v":5},{"v":null},{"v":7}]}, 
     {"c":[{"v":6},{"v":null},{"v":2}]} 
    ] 
} 

Обновлен пример: http://jsfiddle.net/asgallant/M7STT/3/