Google圖表中的列顏色AnnotatedTimeLine

Question

我正在使用Google的AnnotatedTimeLine圖表。我的圖表非常混亂（10-15個數據集），我試圖讓它更容易處理。沿着這些線條，我添加了一個帶有複選框的'索引'來啓用/禁用特定的列。現在我想知道如何獲取/設置每列的顏色/厚度/線條質量。

它看起來像你可以使用getColumnProperties(column #)獲得有關給定列的信息，但是當我在調試器中查看返回的對象時，我看到很多方法但沒有屬性。

或者：

1. 望着在JS調試器的「屬性」的對象是錯誤的方式來枚舉屬性名稱/值
2. 有沒有任何用戶可設置的屬性

關於我應該在哪裏尋找的建議？

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

由於它是一個閃光的圖表，有很少的配置，你可以的選項之外的事情。如果你想要更好地控制圖表，我建議使用annotation columns合併line chart。如果您希望在下方有一個類似的可拖動滑塊，可以選擇一系列日期，我建議將折線圖與chart range filter合併。