javascript - variable background colors in google line chart - Stack Overflow

admin管理员组

文章数量:1310420

I'm looking to draw a fairly simple google LineChart, but I'd like to have horizontal coloured bands across the chart area, to indicate low/middle/high values.

Looking at the chart API, it does not appear to be possibly directly, as chartArea.backgroundColor appears to be the only value I can set.

Being aware that this appears to be a limitation of the charts, is it possible to recreate this any other way, through any other methods or javascript wizardry?

Below is an example of what sort of effect I'm looking to produce.

Thanks in advance.

I'm looking to draw a fairly simple google LineChart, but I'd like to have horizontal coloured bands across the chart area, to indicate low/middle/high values.

Looking at the chart API, it does not appear to be possibly directly, as chartArea.backgroundColor appears to be the only value I can set.

Being aware that this appears to be a limitation of the charts, is it possible to recreate this any other way, through any other methods or javascript wizardry?

Below is an example of what sort of effect I'm looking to produce.

Thanks in advance.

• javascript
• charts
• google-visualization

Share Improve this question Follow edited Apr 21, 2017 at 19:53 WhiteHat 61.3k77 gold badges5353 silver badges136136 bronze badges asked Sep 23, 2016 at 21:45 Kris DunningKris Dunning 12722 silver badges1010 bronze badges 2

• you could use a bo chart, with a stacked area series to apply the shading... – WhiteHat Commented Sep 23, 2016 at 22:09
• Thanks for the ment, though I'm not quite sure that would work. Perhaps for vertical coloured regions, but not for what I'm after. Perhaps I'm mistaken, could you mock something up in jsfiddle to demonstrate how you mean? – Kris Dunning Commented Sep 23, 2016 at 22:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

using a ComboChart

with seriesType: 'area'

and isStacked: true

you can define as many ranges as needed

visibleInLegend: false hides the area series from the legend

then you can set a custom type: for the series you want to track,
such as 'line', in the following working snippet...

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Time', type: 'number'},
        {label: 'Low', type: 'number'},
        {label: 'Avg', type: 'number'},
        {label: 'High', type: 'number'},
        {label: 'Dogs', type: 'number'}
      ],
      rows: [
        {c:[{v: 0}, {v: 25}, {v: 50}, {v: 25}, {v: 0}]},
        {c:[{v: 5}, {v: 25}, {v: 50}, {v: 25}, {v: 24}]},
        {c:[{v: 10}, {v: 25}, {v: 50}, {v: 25}, {v: 20}]},
        {c:[{v: 15}, {v: 25}, {v: 50}, {v: 25}, {v: 48}]},
        {c:[{v: 20}, {v: 25}, {v: 50}, {v: 25}, {v: 53}]},
        {c:[{v: 25}, {v: 25}, {v: 50}, {v: 25}, {v: 61}]},
        {c:[{v: 30}, {v: 25}, {v: 50}, {v: 25}, {v: 63}]},
        {c:[{v: 40}, {v: 25}, {v: 50}, {v: 25}, {v: 66}]},
        {c:[{v: 45}, {v: 25}, {v: 50}, {v: 25}, {v: 70}]},
        {c:[{v: 50}, {v: 25}, {v: 50}, {v: 25}, {v: 75}]},
        {c:[{v: 55}, {v: 25}, {v: 50}, {v: 25}, {v: 78}]},
        {c:[{v: 60}, {v: 25}, {v: 50}, {v: 25}, {v: 80}]},
        {c:[{v: 65}, {v: 25}, {v: 50}, {v: 25}, {v: 85}]},
        {c:[{v: 70}, {v: 25}, {v: 50}, {v: 25}, {v: 90}]}
      ]
    });

    var options = {
      chartArea: {
        width: '60%'
      },
      hAxis: {
        ticks: [0, 15, 30, 45, 60],
        title: 'Time'
      },
      isStacked: true,
      series: {
        // low
        0: {
          areaOpacity: 0.6,
          color: '#FFF59D',
          visibleInLegend: false
        },

        // avg
        1: {
          areaOpacity: 0.6,
          color: '#A5D6A7',
          visibleInLegend: false
        },

        // high
        2: {
          areaOpacity: 0.6,
          color: '#EF9A9A',
          visibleInLegend: false
        },

        // dogs
        3: {
          color: '#01579B',
          type: 'line'
        }
      },
      seriesType: 'area',
      title: 'Example',
      vAxis: {
        ticks: [0, 25, 50, 75, 100],
        title: 'Popularity'
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(dataTable, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic./charts/loader.js"></script>
<div id="chart_div"></div>

本文标签： javascriptvariable background colors in google line chartStack Overflow