谷歌ChartWrapper时间轴图表不使用风格颜色列

Google ChartWrapper Timeline graph not using style color column

本文关键字：风格 颜色 ChartWrapper 时间 谷歌      更新时间：2023-09-26

示例:https://i.stack.imgur.com/2eMxo.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'}

style color example: '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);

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

时间轴图表的数据格式不允许'style'列

需要使用colors配置选项…

colors: ['red', 'blue']

的颜色将跟随第二列

的值

请参阅下面的工作代码片段…

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);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="workflow-dashboard">
  <div id="workflow-plan"></div>
  <div id="workflow-control"></div>
</div>

我试图使这个效果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');
    }`

相关文章：