Question

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

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

要么：

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

关于我应该去哪儿的建议？

Answer 1

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

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)
                               });
}

由于它是一个闪存图表，因此您可以在选项之外进行很少的配置。如果您想要更多地控制图表，建议您使用line chart合并annotation columns。如果您希望在下方有一个类似的可拖动滑块，允许您选择一系列日期，我建议将折线图与chart range filter结合使用。

Google Charts AnnotatedTimeLine中的列颜色

1 个答案: