javascript - 绘制具有不重叠 Y 值的多条线

Question

好吧，所以我应该首先说我们找到了一种解决这个问题的方法，即为除绘制的那条线之外的每条线生成空值。我们的想法是，我们绘制功率级别 (y) 和频率 (x)，但这些值不应重叠，除非在极少数情况下。 C# 和 ASP.NET 图表对此很有效，但我们正在尝试摆脱它们，因为 Google 的可视化 API 更干净、更易于使用和维护，而且速度更快。

我尝试格式化 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 来说也是有意义的。

我还尝试了单个列集的多个行集，它有点有效，但它连接了线条。正如我所说，在某些情况下这是不希望出现的情况，因为偶尔会有一些线共享相同的 x 值，导致线到达其终点并绘制一条连接线回到下一个点的开头。

不过，x 值必须重叠似乎有点荒谬。有没有人找到一种方法来绘制多条线，将事物视为单独的系列，或者单独通过 x 和 y 值添加点与相应的图例项？我在他们的 API 或 SO 中没有找到类似的东西。

Answer 1

图表中的每条线都需要来自单独的数据系列，因此如果您想要两条线，则需要有两个数据系列。两者的 x 轴点不必相同，您只需为在特定 x 轴点处没有值的系列插入空值。下面是一个示例数据表，您可以使用它在图表中绘制两条线:

{
    "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/

[编辑-替代组织]

如果对您来说更容易的话，您还可以像这样组织数据:

{
    "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/