标签：javascript charts google-visualization

我想要绘制一个相当简单的谷歌LineChart,但我希望在图表区域有水平彩色条带,以指示低/中/高值.

查看图表API,它似乎不是直接的,因为chartArea.backgroundColor似乎是我可以设置的唯一值.

意识到这似乎是图表的限制,是否可以通过任何其他方法或javascript魔法重新创建这种方式？

下面是我想要产生什么样的效果的例子.

提前致谢.

解决方法:

使用ComboChart

with seriesType：’area’

和isStacked：是的

您可以根据需要定义多个范围

visibleInLegend：false隐藏图例中的区域系列

然后你可以设置一个自定义类型：对于你想要跟踪的系列,
例如’line’,在以下工作片段中…

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: {
        ti1cks: [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.com/charts/loader.js"></script>
<div id="chart_div"></div>

标签：javascript,charts,google-visualization
来源： https://codeday.me/bug/20190824/1703036.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。