这在 google 图表中是否可行，或者是否有替代方案

Question

是否可以使用 google 图表 api

通过任何方式创建此类图表

Answer 1

您的示例可以通过使用称为 ZingChart. You can use the chart type "range" and the rules 功能的替代图表库根据特定值范围设置最小和最大颜色区域来实现。水平的红色和蓝色线可以通过使用 scale-x 标记来实现。

请参阅下面的示例，了解如何利用 ZingChart 来实现您的目标。我是 ZingChart 团队的一员，如果您需要任何进一步的帮助，请随时与我们联系。

var myConfig = {
  type:"range",
  backgroundColor : "white",
  scaleX:{
      maxItems:8,
      zooming:1,
  },
  scaleY:{
      minValue:"auto",
      markers : [
        {
          type : "line",
          range : [70],
          lineColor : "red"
        },
        {
          type : "line",
          range : [30],
          lineColor : "blue"
        }
      ]
  },
  "series":[
      {
          lineWidth:2,
          lineColor:"#8100a4",
          marker:{
            type:"none"
          },
          values : [[60,60],[70,70],[78,70],[75,70],[70,70],[50,50],[60,60],[60,60],[60,60],[34,34],[35,35],[35,35],[35,35],[30,30],[24,30],[26,30],[25,30],[28,30],[30,30],[32,32]],
          backgroundColor:"#1049c4",
          rules:[
            {
              rule:"%node-max-value < %node-min-value",
              backgroundColor:"#c00"
            }
          ],
          minLine:{
            lineColor:"#8100a4",
          },
          maxLine:{
            lineColor:"#8100a4"
          }
      }
  ]
};
 
zingchart.render({ 
 id : 'myChart', 
 data : myConfig, 
 height: 300, 
 width: 500 
});

<html>
 <head>
  <script src= "https://cdn.zingchart.com/2.1.4/zingchart.min.js"></script>
  <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/2.1.4/modules/";</script></head>
 <body>
  <div id='myChart'></div>
 </body>
</html>

这在 google 图表中是否可行，或者是否有替代方案

Is this possible in google charts or is there an alternitive or hack

charts

google-visualization