Question

好的，所以我应该首先说我们通过为除了绘制的每一行之外的每一行生成空值来找到解决方法。我们的想法是绘制功率水平（y）和频率（x），但这些值不应重叠，除非在极少数情况下。 C＃和ASP.NET图表适用于此，但我们正试图摆脱它们，因为Google的Visualization 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轴点没有值的系列插入空值。下面是一个示例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/

[编辑 - 替代组织]

如果您可以更轻松地组织这样的数据：

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

使用非重叠Y值绘制多条线

1 个答案: