谷歌折线图的条纹填充

时间:2017-05-18 11:26:05

标签: javascript google-visualization

我正在尝试在我的折线图中添加条纹填充,似乎有一个正式的解决方案https://developers.google.com/chart/image/docs/gallery/line_charts,他们谈论chf。

但是,我不知道如何实现这一点,我已经用Google搜索了,现在搜索了stackoverflow几个小时,似乎无法找到解决方案。

我需要像偶数/奇数css函数一样的条纹填充。

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

  function Process1() {
    var data = google.visualization.arrayToDataTable([
      ['value1', 'value2', 'value3', 'value4'],
      ['10',    400,      380,      48],
      ['20',    400,      340,      260],
      ['30',    400,      410,      310],
      ['40',    400,      390,      380],
      ['50',    400,      345,      345],
      ['60',    400,      385,      370],
      ['70',    400,      430,      410],
      ['80',    400,      null,         null],
      ['90',    400,      null,         null],
      ['100',   400,      null,         null],
      ['110',   400,      null,         null],
      ['120',   400,      null,         null]

    ]);

    var options = {
      theme: 'material',
      lineWidth: 3,
      colors: ['#3D3D3D', '#4CDD37', '#2076F2'],
      title: 'Orderinformation plan 1',
      titleTextStyle: {fontName:'Lato', fontSize:'20'},
      legend: { 
          position: 'right', 
         textStyle: {
              fontName:'Lato', fontSize:'12'
          },
      },        
      hAxis: {
            title: 'Time in minutes',
            titleTextStyle: {fontName:'Lato', fontSize:'16', italic:false},
          textStyle: {
              fontName:'Lato', fontSize:'16'
          },
      },
      vAxis: {
          title: 'Temperature in celsius',
          titleTextStyle: {fontName:'Lato', fontSize:'16', italic:false},
          textStyle: {
              fontName:'Lato', fontSize:'16'
          },
          viewWindowMode: 'explicit',
          ticks: [25,50,100,150,200,250,300,350,400,460],
          viewWindow: {
              max:460,
              min:25
          },
          gridlines: {
          count: 10
        }
      }
    };


    var chart = new google.visualization.LineChart(document.getElementById('curve_chart_1'));

    chart.draw(data, options);
  }

0 个答案:

没有答案