谷歌线图颜色?

我想改变Google线图的背景色(变成#262626)和字体色(变成白色)。我还想通过点击按钮来隐藏一条线。有人知道如何解决这个问题吗?

我使用了这个图表。LineCharthttps:/developers.google.comchartinteractivedocsgallerylinechart?hl=de#creating-material-line-charts。

谢谢你的帮助:)

var S1 = 81;
var S2 = 77;
var S3 = 71;
var S4 = 69;
var S5 = 92;
var S6 = 169;
var S7 = 218;
var S8 = 169;
var S9 = 0;
var S10 = 0;
var S11 = 0;
var S12 = 0;
var S13=0;

google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Tag', 'Deine Preise', 'Verlauf 1', 'Verlauf 2', 'Verlauf 3'],
          ['Mon AM',  S1, 150, 110, 100],
          ['Mon PM',  S2, 140, 105, 90],
          ['Tues AM',  S3, 130, 100, 78],
          ['Tues PM',  S4, 120, 140, 60],
          ['Wed AM', S5, 110, 120, 100],
          ['Wed PM', S6, 100, 200, 140],
          ['Thur AM', S7, 90, 380, 180],
          ['Thur PM', S8, 80, 240, 130],
          ['Fri AM', S9, 70, 200, 90],
          ['Fri PM', S10, 60, 120, 78],
          ['Sat AM', S11, 50, 100, 60],
          ['Sat PM', S12, 40, 90, 57]
        ]);


  var options = {
            width: 1100,
            height: 600,
            colors: ['#2979FF','#FF7728','#E8471A','#FF2D1C'],
            chart: {
              title: 'Preis',
              subtitle: 'Verlauf mit Bespielen',
            },
            }


        var chart = new google.charts.Line(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
body{
  background: #262626;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="app.js">
    </script>
  </head>
  <body>
  <div id="curve_chart"></div>
  </body>
</html>

解决方案:

首先,当使用 材料 图表,需要将选项转换为 材料 选项,使用以下静态方法…

google.charts.Line.convertOptions(options)

至于背景色,可以使用以下选项…

backgroundColor: {
  fill: '#262626'
},

至于文字颜色,可以使用以下选项… …

titleTextStyle: {
  color: '#ffffff'
},
hAxis: {
  textStyle: {
    color: '#ffffff'
  }
},
vAxis: {
  textStyle: {
    color: '#ffffff'
  }
}

至于隐藏一行,下面的工作片段包括一个点击图例条目隐藏显示一行的例子……

var S1 = 81;
var S2 = 77;
var S3 = 71;
var S4 = 69;
var S5 = 92;
var S6 = 169;
var S7 = 218;
var S8 = 169;
var S9 = 0;
var S10 = 0;
var S11 = 0;
var S12 = 0;
var S13 = 0;
var color = ['lime','cyan','magenta','yellow'];

google.charts.load('46', {
  'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Tag', 'Deine Preise', 'Verlauf 1', 'Verlauf 2', 'Verlauf 3'],
    ['Mon AM', S1, 150, 110, 100],
    ['Mon PM', S2, 140, 105, 90],
    ['Tues AM', S3, 130, 100, 78],
    ['Tues PM', S4, 120, 140, 60],
    ['Wed AM', S5, 110, 120, 100],
    ['Wed PM', S6, 100, 200, 140],
    ['Thur AM', S7, 90, 380, 180],
    ['Thur PM', S8, 80, 240, 130],
    ['Fri AM', S9, 70, 200, 90],
    ['Fri PM', S10, 60, 120, 78],
    ['Sat AM', S11, 50, 100, 60],
    ['Sat PM', S12, 40, 90, 57]
  ]);


  var options = {
    width: 1100,
    height: 600,
    colors: ['#2979FF', '#FF7728', '#E8471A', '#FF2D1C'],
    chart: {
      title: 'Preis',
      subtitle: 'Verlauf mit Bespielen',
    },
    backgroundColor: {
      fill: '#262626'
    },
    titleTextStyle: {
      color: '#ffffff'
    },
    hAxis: {
      textStyle: {
        color: '#ffffff'
      }
    },
    vAxis: {
      textStyle: {
        color: '#ffffff'
      }
    },
    colors: ['cyan', 'yellow', 'magenta', 'lime']
  }


  var chart = new google.charts.Line(document.getElementById('curve_chart'));

  var columns = [];
  var series = {};
  for (var i = 0; i < data.getNumberOfColumns(); i++) {
    columns.push(i);
    if (i > 0) {
      series[i - 1] = {};
    }
  }
  
  google.visualization.events.addListener(chart, 'select', function () {
    var sel = chart.getSelection();
    // if selection length is 0, we deselected an element
    if (sel.length > 0) {
      // if row is null, we clicked on the legend
      if (sel[0].row === null) {
        var col = sel[0].column;
        if (columns[col] == col) {
          // hide the data series
          columns[col] = {
            label: data.getColumnLabel(col),
            type: data.getColumnType(col),
            calc: function () {
              return null;
            },
          };

          // grey out the legend entry
          series[col - 1].color = '#CCCCCC';
        }
        else {
          // show the data series
          columns[col] = col;
          series[col - 1].color = null;
        }
        options.series = series;
        var view = new google.visualization.DataView(data);
        view.setColumns(columns);
        chart.draw(view, google.charts.Line.convertOptions(options));
      }
    }    
  });

  chart.draw(data, google.charts.Line.convertOptions(options));
}
body {
  background: #262626;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Index</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="app.js">
  </script>
</head>

<body>
  <div id="curve_chart"></div>
</body>

</html>

给TA打赏
共{{data.count}}人
人已打赏
未分类

flask wtform中验证false后如何保留字段数据?

2022-9-8 4:57:17

未分类

jQuery - 从其他函数中获取变量

2022-9-8 4:57:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索