Question

示例：http://i.imgur.com/xD6gPnZ.png 但是行中的一些条形必须具有其他颜色列结构：

cols
    {type: 'string', id: 'Executor'},
    {type: 'string', id: 'Name'},
    {type: 'string', id: 'Tooltip', role: 'tooltip', p: {html: true}},
    {type: 'string', role: 'style'},
    {type: 'date', id: 'start_date'},
    {type: 'date', id: 'finish_date'},
    {type: 'number', id: 'project_id'},
    {type: 'number', id: 'issue_id'}

样式颜色示例：'color：green' 但是每一行都用自己的颜色着色。这是我的js脚本

    var projectData = $.ajax({
        url: project_url,
        dataType: "json",
        async: false
    }).responseText;

    var project_id = jQuery.parseJSON(projectData).id;
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
        dataTable.setCell(i, 3, dataTable.getValue(i, project_id_column) == project_id ? 'color: green' : 'color: red')
    }

    var dashboard = new google.visualization.Dashboard(document.getElementById('workflow-dashboard'));
    var control = new google.visualization.ControlWrapper({
        'controlType': 'DateRangeFilter',
        'containerId': 'workflow-control',
        'options': {
            'filterColumnIndex': filter_index_column,
            'ui': {
                showRangeValues: true,
                format: {
                    pattern: "EEE, MMM d, ''yy"
                }
            }
        }
    });

    var chart = new google.visualization.ChartWrapper({
        'chartType': 'Timeline',
        'containerId': 'workflow-plan',
        'options': {
            tooltip: {isHtml: true},
            'width': '100%',
            'height': 'auto',
            'chartArea': {
                width: '80%',
                height: '80%'
            },
            avoidOverlappingGridLines: true
        },
        'view': {'columns': show_columns}
    });

    dashboard.bind(control, chart);
    dashboard.draw(dataTable);

我不知道为什么我不能让这个图表只包含2种颜色;

Answer 1

时间轴图表的data format不允许class A(object): class B(object): @classmethod def init(cls): cls.a = 1 class C(object): @classmethod def init(cls): cls.b = 2 cls.c = A.B.a + cls.b @classmethod def init(cls): cls.B.init() cls.C.init() A.init()列

需要使用'style' configuration option ...

colors

颜色将遵循第二列的值

请参阅以下工作代码段...

＆＃13;

colors: ['red', 'blue']

＆＃13;

google.charts.load('current', {
  packages: ['controls', 'timeline']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {type: 'string', id: 'Executor'},
      {type: 'string', id: 'Name'},
      {type: 'string', id: 'Tooltip', role: 'tooltip', p: {html: true}},
      {type: 'date', id: 'start_date'},
      {type: 'date', id: 'finish_date'},
    ],
    rows: [         // colors follow second column
      {c:[{v: 'A'}, {v: 'John'}, {v: 'John Doe'}, {v: new Date(2016, 7, 31)}, {v: new Date(2016, 8, 1)}]},
      {c:[{v: 'A'}, {v: 'Jane'}, {v: 'Jane Doe'}, {v: new Date(2016, 7, 31)}, {v: new Date(2016, 8, 1)}]},
      {c:[{v: 'B'}, {v: 'John'}, {v: 'John Doe'}, {v: new Date(2016, 7, 31)}, {v: new Date(2016, 8, 1)}]},
      {c:[{v: 'B'}, {v: 'Jane'}, {v: 'Jane Doe'}, {v: new Date(2016, 7, 31)}, {v: new Date(2016, 8, 1)}]},
      {c:[{v: 'C'}, {v: 'John'}, {v: 'John Doe'}, {v: new Date(2016, 7, 31)}, {v: new Date(2016, 8, 1)}]},
      {c:[{v: 'C'}, {v: 'Jane'}, {v: 'Jane Doe'}, {v: new Date(2016, 7, 31)}, {v: new Date(2016, 8, 1)}]},
      {c:[{v: 'C'}, {v: 'Fred'}, {v: 'Fred Doe'}, {v: new Date(2016, 7, 31)}, {v: new Date(2016, 8, 1)}]}
    ]
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('workflow-dashboard'));
  var control = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'workflow-control',
    options: {
      filterColumnIndex: 3,
      ui: {
        showRangeValues: true,
        format: {
          pattern: "EEE, MMM d, ''yy"
        }
      }
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    containerId: 'workflow-plan',
    options: {
      tooltip: {isHtml: true},
      width: '100%',
      height: 600,
      chartArea: {
        width: '80%',
        height: '80%'
      },
      colors: ['red', 'blue', 'green'],
      avoidOverlappingGridLines: true
    },
    view: {columns: [0, 1, 2, 3, 4]}
  });

  dashboard.bind(control, chart);
  dashboard.draw(dataTable);
}

＆＃13;

Answer 2

我试图使这个效果成为i.imgur.com/iE94pWF.png。我解决了这个问题，为条形标签添加了额外的空格（我没有显示）

我的解决方案：

    `var colors = [];
    var project_id = jQuery.parseJSON(projectData).id;
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
        var val = ' ';
        for(var j = 0; j < i; j++) {
            val += ' ';
        }
        dataTable.setCell(i, 1, val);
        colors.push(dataTable.getValue(i, project_id_column) == project_id ? '#74d874' : '#d9d9d9');
    }`

Google ChartWrapper时间轴图表未使用样式颜色列

2 个答案: