Google 图表无法为水平轴 (hAxis) 着色

Question

不知何故，我无法为水平轴的文本着色。这是我为选项设置的内容：

var options = {
    colors: ['#B20054', '#993D69', '#BD00FF', '#FFFE40', '#CCB814', '#998F3D', '#40B2FF'],
    timeline: { colorByRowLabel: true, rowLabelStyle: { fontSize: 9, color: '#603913' },
            barLabelStyle: {  fontSize: 9 }  }
    hAxis: {
        textStyle:{color: '#FFF'}
    }
};

截图：

完整代码：

var container = document.getElementById('timetracking_Dennis');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Term' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  dataTable.addRows([
    [ '#5700', 'Vernieuwing wifi-netwerk', new Date(0,0,0,10,16,0), new Date(0,0,0,10,17,0) ],
    [ '#5704', 'Account Mike Hees', new Date(0,0,0,10,23,0), new Date(0,0,0,10,28,0) ],
    [ '#5798', 'Laptop Bas van der Beer traag', new Date(0,0,0,10,15,0), new Date(0,0,0,11,14,0) ],
    [ '#5832', 'Problemen iMac', new Date(0,0,0,11,24,0), new Date(0,0,0,11,25,0) ],
    [ '#5832', 'Problemen iMac', new Date(0,0,0,11,34,0), new Date(0,0,0,11,35,0) ],
    [ '#5856', 'Problemen iMac', new Date(0,0,0,17,28,0), new Date(0,0,0,18,0,0) ],
    [ '#5856', 'Internet Broekseweg', new Date(0,0,0,9,14,0), new Date(0,0,0,9,15,0) ],
    [ '#5856', 'Internet Broekseweg', new Date(0,0,0,9,0,0), new Date(0,0,0,10,0,0) ],
    [ '#5856', 'Internet Broekhovenseweg', new Date(0,0,0,16,2,0), new Date(0,0,0,16,12,0) ],
    [ '#5857', 'gebruiker Abdel issues met opstarten', new Date(0,0,0,11,37,0), new Date(0,0,0,11,38,0) ],
    [ '#5895', 'Printer uit flexplek halen', new Date(0,0,0,11,9,0), new Date(0,0,0,11,17,0) ]    
  ]);

    var options = {
        colors: ['#B20054', '#993D69', '#BD00FF', '#FFFE40', '#CCB814', '#998F3D', '#40B2FF'],
        timeline: { colorByRowLabel: true, rowLabelStyle: { fontSize: 9, color: '#603913' },
                barLabelStyle: {  fontSize: 9 }  }
      };

  chart.draw(dataTable, options);

Answer 1

看来您无法为时间轴图表上的轴设置样式...这很奇怪。

这有你所有的选择： https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline

如果你比较这个图表选项，你会发现它缺乏良好的轴支持：https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

您也许可以更改 JS 以支持您想要执行的操作，但可能比它的价值更麻烦。

您是否尝试过通过 css 定位它？可能是一个快速修复

Answer 2

有一个非常肮脏的黑客可以用来给 X 轴着色。

时间线的 svg 包含多个 <text> 元素。这些包括 X 轴上的数字。

如果找到图表的 <svg> 元素，并将其分配给名为 svg 的变量，则可以执行以下操作：

svg.find('[font-size="13"]').attr('fill', '#ffffff');

假设您想将 X 轴着色为白色。

这只适用于您的特定情况，因为您已经更改了 rowLabelStyle。默认情况下，行标签也有 font-size="13".

Google 图表无法为水平轴 (hAxis) 着色

Google Chart cannot color horizontal axis (hAxis)

html

javascript

css

google-visualization