2

我正在使用AnnotatedTimeLineGoogle 的图表。我的图表非常混乱（10-15 个数据集），我试图让它更容易处理。按照这些思路，我添加了一个带有复选框的“索引”来启用/禁用特定列。现在我想知道如何获取/设置每列的颜色/厚度/线条质量。

看起来您可以使用获取有关给定列的信息，getColumnProperties( column # )但是当我在调试器中查看返回的对象时，我看到很多方法但没有属性。

任何一个：

  1. 在 js 调试器中查看“属性”对象是枚举属性名称/值的错误方法
  2. 没有任何用户可设置的属性

关于我应该在哪里寻找的建议？

4

1 回答 1

2

您需要为图表中的每个数据值设置颜色。请参阅此处的文档。该colors选项将允许您为每组设置颜色（为每个不同系列的颜色传入一个数组）。thickness将设置线条粗细，但它是“一刀切”选项，不能为每个系列单独配置。您可以在此处查看如何配置带注释的时间线图的示例：

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sold Pencils');
  data.addColumn('string', 'title1');
  data.addColumn('string', 'text1');
  data.addColumn('number', 'Sold Pens');
  data.addColumn('string', 'title2');
  data.addColumn('string', 'text2');
  data.addColumn('number', 'Sold Papers');
  data.addRows([
    [new Date(2009, 1 ,1), 30000, null, null, 4645, null, null, 12345],
    [new Date(2009, 1 ,2), 14045, null, null, 2374, null, null, 44444],
    [new Date(2009, 1 ,3), 55022, null, null, 5766, null, null, 76545],
    [new Date(2009, 1 ,4), 75284, null, null, 1334, 'Out of Stock', 'Ran out of stock on pens at 4pm', 16345],
    [new Date(2009, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 6467, null, null, 41345],
    [new Date(2009, 1 ,6), 33322, null, null, 3463, null, null, 33665]
  ]);

  var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
      document.getElementById('visualization'));
  annotatedtimeline.draw(data, {
                                //'allValuesSuffix': '%', // A suffix that is added to all values
                                'colors': ['blue', 'red', '#0000bb'], // The colors to be used
                                'displayAnnotations': true,
                                'displayExactValues': true, // Do not truncate values (i.e. using K suffix)
                                'displayRangeSelector' : false, // Do not sow the range selector
                                'displayZoomButtons': false, // DO not display the zoom buttons
                                'fill': 30, // Fill the area below the lines with 20% opacity
                                'legendPosition': 'newRow', // Can be sameRow
                                //'max': 100000, // Override the automatic default
                                //'min':  100000, // Override the automatic default
                                'scaleColumns': [0, 1], // Have two scales, by the first and second lines
                                'scaleType': 'allfixed', // See docs...
                                'thickness': 2, // Make the lines thicker
                                'zoomStartTime': new Date(2009, 1 ,2), //NOTE: month 1 = Feb (javascript to blame)
                                'zoomEndTime': new Date(2009, 1 ,5) //NOTE: month 1 = Feb (javascript to blame)
                               });
}

由于它是一个闪存图表，因此您可以在选项之外进行很少的配置。如果您想更好地控制图表，我建议使用注释列组合折线图。如果您想在下面有一个类似的可拖动滑块，允许您选择日期范围，我建议将折线图与图表范围过滤器结合使用。

于 2013-03-08T00:45:38.053 回答