Question

我正在撰写Google图表。它有堆叠的列。最重要的是，我想绘制2行，表示最小和最大允许值。

enter image description here

我提出的唯一解决方案是修改ComboCharts的第一个例子。我的结果如下：

enter image description here

这还不够。图形是可变的，因此如果仅显示1个Quartal，则该线将仅为点。我的问题是：

有没有办法进一步画线，所以它会触及图的左右边界？
我可以在图表中绘制标记线，而不是假装它是另一个数据点吗？

如果您愿意，可以使用ComboChart here。

Answer 1

使用离散（基于字符串）的x轴无法使线条边缘对齐。如果切换到连续（数字，日期，日期时间，时间）轴，则可以在实际数据之前添加一行，之后在行之后添加一行（以及其他数据系列的空值）：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Quarter');
    data.addColumn('number', 'Value 1');
    data.addColumn('number', 'Value 2');
    data.addColumn('number', 'Value 3');
    data.addColumn('number', 'Goal 1');
    data.addColumn('number', 'Goal 2');
    data.addRows([
        [0, null, null, null, 10, 14],
        [1, 5, 4, 7, null, null],
        [2, 6, 9, 6, null, null],
        [3, 2, 6, 4, null, null],
        [5, null, null, null, 10, 14]
    ]);

    var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
    chart.draw(data, {
        height: 400,
        width: 600,
        isStacked: true,
        legend: {
            position: 'top'
        },
        seriesType: 'bars',
        interpolateNulls: true,
        series: {
            3: {
                type: 'line'
            },
            4: {
                type: 'line'
            }
        },
        hAxis: {
            format: 'Q#',
            ticks: [1, 2, 3, 4],
            viewWindow: {
                min: 0.5,
                max: 4.5
            }
        },
        chartArea: {
            left: '10%',
            width: '80%'
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

参见工作示例：http://jsfiddle.net/asgallant/W67qU/

Answer 2

也许有点晚，但是我遇到了同样的问题。我试图将最大和最小线设置为折线图中包含大量数据点的折线图，并且我想避免添加具有很多重复点的新系列，所以我使用了叠加层（https://developers.google.com/chart/interactive/docs/overlays#javascript2）。

这里是一个示例，这只是我正在工作的草稿，但也许可以提供帮助：

<html>
  <head>
    <script
      type="text/javascript"
      src="https://www.gstatic.com/charts/loader.js"
    ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <style>
      #container {
        position: relative;
        width: 900px;
        height: 500px;
      }
      .min-bar {
        height: 1px;
        background-color: red;
        position: absolute;
        left: 0;
        right: 0;
      }
    </style>
    <script type="text/javascript">
      $(function() {
        $.get(
          "https://firebasestorage.googleapis.com/v0/b/manasav-pricetracker.appspot.com/o/products%2F-L6O-CtBKZAc2NTCFq7Z.data?alt=media&token=60e06bb6-59b7-41a9-8fd0-f82f4ddc75f2",
          function(data) {
            google.charts.load("current", { packages: ["corechart"] });
            google.charts.setOnLoadCallback(drawChart);

            var downloadedData = JSON.parse("[" + data);

            function drawChart() {
              var dataTable = [["Time", "New"]];
              let min = Number.MAX_VALUE;

              let rowMin;
              for (var i in downloadedData) {
                var d = downloadedData[i];
                if (d.new < min) {
                  rowMin = i;
                  min = d.new;
                }
                dataTable.push([new Date(d.date), d.new]);
              }

              var data = google.visualization.arrayToDataTable(dataTable);

              var options = {
                title: "Price evolution",
                legend: { position: "bottom" },
                trendlines: { 0: {} }
              };

              var chart = new google.visualization.LineChart(
                document.getElementById("curve_chart")
              );

              function placeMarker(dataTable) {
                var cli = this.getChartLayoutInterface();
                var chartArea = cli.getChartAreaBoundingBox();
                document.querySelector(".min-bar").style.top =
                  Math.floor(cli.getYLocation(min)) + "px";

                document.querySelector(".min-bar").style.left =
                  Math.floor(cli.getXLocation(dataTable.getValue(0,0))) - 25 + "px";

                  document.querySelector(".min-bar").style.right =
                  (document.querySelector("#container").offsetWidth - Math.floor(cli.getXLocation(dataTable.getValue(dataTable.getNumberOfRows()-1,0)))) - 25 + "px";
                // document.querySelector(".min-bar").style.top =
                // Math.floor(cli.getXLocation(dataTable.getValue(rowMin, 1))) +
                // "px";
              }
              google.visualization.events.addListener(
                chart,
                "ready",
                placeMarker.bind(chart, data)
              );
              chart.draw(data, options);
            }
          }
        );
      });
    </script>
  </head>
  <body>
    <div id="container">
      <div id="curve_chart" style="width: 900px; height: 500px"></div>
      <div class="min-bar"></div>
    </div>
  </body>
</html>

Jsfiddle演示=> https://jsfiddle.net/jRubia/8z7ao1nh/

在Google Charts中绘制视觉线条

2 个答案: