0

在这里，我试图将列颜色设置为“#FFFFFF00”。此颜色代码在台式机或笔记本电脑浏览器中正常工作。但是，虽然使用相同的方法尝试在使用 webview显示消息（如'#FFFFFF00' 的 android 设备中加载图表时是无效的十六进制颜色

这是Android设备屏幕 在此处输入图像描述

这是网络浏览器屏幕 **在此处输入图片描述**

这是我正在使用的代码。 

<html>
<body>
<div id="chart_div" style="width: 100%; height: 100%;"></div>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var jsonObj = {"graphData":[{"label":"Data1","startTime":1533875458929,"endTime":1533882249978},{"label":"Data1","startTime":1533883034531,"endTime":1533884571783},{"label":"Data3","startTime":1533885078579,"endTime":1533885080601},{"label":"Data2","startTime":1533885080692,"endTime":1533885085560},{"label":"Data2","startTime":1533885288787,"endTime":1533885289822},{"label":"Data1","startTime":1533885291855,"endTime":1533885294676},{"label":"Data1","startTime":1533885299333,"endTime":1533886561000},{"label":"Data1","startTime":1533895149007,"endTime":1533906604650},{"label":"Data2","startTime":1533895309727,"endTime":1533895312451},{"label":"Data3","startTime":1533895309784,"endTime":1533895312367},{"label":"Data2","startTime":1533895797279,"endTime":1533895804452},{"label":"Data3","startTime":1533895797503,"endTime":1533895804848},{"label":"Data2","startTime":1533895807047,"endTime":1533895812201},{"label":"Data3","startTime":1533895807276,"endTime":1533895812003},{"label":"Data3","startTime":1533897706544,"endTime":1533897709518},{"label":"Data2","startTime":1533897706714,"endTime":1533897709651},{"label":"Data3","startTime":1533897711492,"endTime":1533897712438},{"label":"Data2","startTime":1533897711685,"endTime":1533897712545},{"label":"Data2","startTime":1533897732040,"endTime":1533897787031},{"label":"Data3","startTime":1533897732126,"endTime":1533897772174},{"label":"Data2","startTime":1533897788230,"endTime":1533897790235},{"label":"Data2","startTime":1533897848566,"endTime":1533897852356},{"label":"Data3","startTime":1533897848661,"endTime":1533897852427},{"label":"Data3","startTime":1533897977422,"endTime":1533897979531},{"label":"Data2","startTime":1533897977571,"endTime":1533897979731},{"label":"Data3","startTime":1533898561521,"endTime":1533898563708},{"label":"Data2","startTime":1533898561641,"endTime":1533898563783},{"label":"Data3","startTime":1533898565041,"endTime":1533898567063},{"label":"Data2","startTime":1533898565254,"endTime":1533898567174},{"label":"Data3","startTime":1533899674499,"endTime":1533899678492},{"label":"Data2","startTime":1533899674587,"endTime":1533899677559},{"label":"Data3","startTime":1533899786994,"endTime":1533899989725},{"label":"Data2","startTime":1533899787081,"endTime":1533899989806},{"label":"Light","startTime":1533899787081,"endTime":1533899989806}],"colorsData":{"Data3":"green","Data2":"green","Data1":"red","Light":"#FFFFFF00"}};

        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn({ type: 'string', id: 'Equipment'});
        dataTable.addColumn({ type: 'date', id: 'Start'});
        dataTable.addColumn({ type: 'date', id: 'End'});



        var chartData = jsonObj.graphData;
       var rowData = new Array(chartData.length);
       var number = 0;
      for (i in chartData) {
        rowData[i] = [chartData[i].label,new Date(chartData[i].startTime),new Date(chartData[i].endTime)];
      }

        dataTable.addRows(rowData);





    var colors = [];
    var columns = [];
    var colorMap = jsonObj.colorsData;


    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {

        columns.push(dataTable.getValue(i, 0));

    }

    let unique = columns.filter((it, i, ar) => ar.indexOf(it) === i);
  
    for (var i = 0; i < unique.length; i++) {


        colors.push(colorMap[unique[i]]);

    }
   




      var options = {
        height: 10,
        timeline: {
          groupByRowLabel: true,
          colorByRowLabel: true
        },
         is3D:true,
          colors: colors
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(dataTable, options);
    }
    </script>
</body>

4

0 回答 0