Question

我是谷歌排行榜的新手。我想绘制一条红线，如下图所示。请帮我解决这个问题。

我在上面的图片中显示了我的要求线。怎么做？请帮我。我用了Combo Chart。我的代码如下。

function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
            [ 'Time', 'Col1',{ role: 'style' }, 'col2'],
            [ '09:50', 1000,'color: #B0C4DE', null],
            [ '10:00', 1200, 'color: #EEE8AA',1400],
            [ '10:30', 1500, 'color: #EEE8AA',1400],
            [ '11:00', 1300, 'color: #B0C4DE',null],
            [ '11:30', 1200, 'color: #B0C4DE',null],
            [ '12:00', 1300, 'color: #B0C4DE',null],
            [ '12:30', 1200, 'color: #EEE8AA',1200],
            [ '01:00', 1300, 'color: #EEE8AA',1200],
            [ '01:30', 1600, 'color: #B0C4DE',null]]);

    var options = {
        width : 1001,
        height : 500,
        vAxis : {
            format : '#[kw]',
            viewWindowMode:'explicit',
            viewWindow: {
                max:3000,
                min:0
            },
            ticks: [0, 1000, 2000, 3000]
        },

        seriesType : "bars",
        series : {
            1 : {
                type : "line"
            }
        },
        legend : {
            position : 'none'
        },
        colors : ['#ff0000','#008000']
    };

    var chart = new google.visualization.ComboChart(document
            .getElementById('number_format_chart'));
    chart.draw(data, options);
}

Answer 1

您已经对绿色行有正确的想法，
这里有 red 行的几个选项......

为了获得升线，
必须在两点之间添加新行。

离散轴（'string'值） -
如果红色线的中间部分需要垂直，则然后离散轴将不起作用因为无法设置hAxis刻度，
并且每行都会有间隙，
迫使线条成对角线。
连续轴（'timeofday'值） -
红色线的中间部分可以是垂直的，
因为可以设置hAxis刻度并且不重复。
但是，具有连续轴的ColumnChart更难以格式化（imo）。

见下面的工作片段......

google.charts.load('current', {
  callback: function () {
    var seriesOptions = {
      type : "line"
    };

    new google.visualization.ComboChart(document.getElementById('chart_div0')).
    draw(
      google.visualization.arrayToDataTable([
        [ 'Time', 'Col1', { role: 'style' }, 'Col2', 'Col3'],
        [ '09:50', 1000, 'color: #B0C4DE', null, null],
        [ '10:00', 1200, 'color: #EEE8AA', 1400, 1600],
        [ null, null, 'color: #EEE8AA', 1400, 1600],
        [ null, null, 'color: #EEE8AA', 1400, 1700],
        [ '10:30', 1500, 'color: #EEE8AA', 1400, 1700],
        [ '11:00', 1300, 'color: #B0C4DE', null, null],
        [ '11:30', 1200, 'color: #B0C4DE', null, null],
        [ '12:00', 1300, 'color: #B0C4DE', null, null],
        [ '12:30', 1200, 'color: #EEE8AA', 1200, 1400],
        [ null, null, 'color: #B0C4DE', 1200, 1400],
        [ null, null, 'color: #B0C4DE', 1200, 1500],
        [ '01:00', 1300, 'color: #EEE8AA', 1200, 1500],
        [ '01:30', 1600, 'color: #B0C4DE', null, null]
      ]),
      {
        width : 1001,
        height : 500,
        vAxis : {
          format : '#[kw]',
          viewWindowMode:'explicit',
          viewWindow: {
            max:3000,
            min:0
          },
          ticks: [0, 1000, 2000, 3000]
        },
        seriesType : "bars",
        series : {
          1 : seriesOptions,
          2 : seriesOptions
        },
        legend : {
          position : 'none'
        },
        colors : ['transparent', '#008000', '#ff0000']
      }
    );

    new google.visualization.ComboChart(document.getElementById('chart_div1')).
    draw(
      google.visualization.arrayToDataTable([
        [ 'Time', 'Col1', { role: 'style' }, 'Col2', 'Col3'],
        [ [09,50,00], 1000, 'color: #B0C4DE', null, null],
        [ [10,00,00], 1200, 'color: #EEE8AA', 1400, 1600],
        [ [10,15,00], null, 'color: #EEE8AA', 1400, 1600],
        [ [10,15,00], null, 'color: #EEE8AA', 1400, 1700],
        [ [10,30,00], 1500, 'color: #EEE8AA', 1400, 1700],
        [ [11,00,00], 1300, 'color: #B0C4DE', null, null],
        [ [11,30,00], 1200, 'color: #B0C4DE', null, null],
        [ [12,00,00], 1300, 'color: #B0C4DE', null, null],
        [ [12,30,00], 1200, 'color: #EEE8AA', 1200, 1400],
        [ [12,45,00], null, 'color: #EEE8AA', 1200, 1400],
        [ [12,45,00], null, 'color: #EEE8AA', 1200, 1500],
        [ [13,00,00], 1300, 'color: #EEE8AA', 1200, 1500],
        [ [13,30,00], 1600, 'color: #B0C4DE', null, null]
      ]),
      {
        bar: {
          gap: 10
        },
        width : 1001,
        height : 500,
        hAxis : {
          ticks: [[09,30,00], [09,50,00], [10,00,00], [10,30,00], [11,00,00], [11,30,00], [12,00,00], [12,30,00], [13,00,00], [13,30,00], [14,00,00]]
        },
        vAxis : {
          format : '#[kw]',
          viewWindowMode:'explicit',
          viewWindow: {
            max:3000,
            min:0
          },
          ticks: [0, 1000, 2000, 3000]
        },
        seriesType : "bars",
        series : {
          1 : seriesOptions,
          2 : seriesOptions
        },
        legend : {
          position : 'none'
        },
        colors : ['transparent', '#008000', '#ff0000']
      }
    );
  },
  packages: ['corechart']
});

div {
  text-align: center;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Discrete Axis</div>
<div id="chart_div0"></div>
<div>Continuous Axis</div>
<div id="chart_div1"></div>

如何在Google组合图表中绘制一条线

1 个答案: