javascript - 谷歌可视化 - 仅在特定点显示图例

Question

我的页面中有下面的图表，但我需要显示一个图例，仅在第一个或最后一个点上显示“Meta”线，如下图所示。

可以吗？

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);


      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
         ['Year', 	'Anual',	'Mensal',	'Meta'],
         ['2012',  	46.17,  	,      		52.5],
         ['2013',  	45.34,  	,      		52.5],
         ['2014',  	45.24,  	,      		52.5],
         ['2015',  	45.05,  	,      		52.5],
         ['2016',  	46.69,  	,      		52.5],
         ['2016/01',  	,      		49.4,      	52.5],
         ['2016/02',  	,      		49.4,      	52.5],
         ['2016/03',  	,      		49.4,      	52.5],
         ['2016/04',  	,      		49.4,      	52.5],
         ['2016/05',  	,      		49.84,      	52.5],
         ['2016/06',  	,      		45.34,      	52.5],
         ['2016/07',  	,      		43.94,      	52.5],
         ['2016/08',  	,      		49.6,      	52.5]
      ]);

    var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2, 
                       { calc: "stringify",
                         sourceColumn: 2,
                         type: "string",
                         role: "annotation" },
                       3, 
                       { calc: "stringify",
                         sourceColumn: 3,
                         type: "string",
                         role: "scope" } ]);

    var options = {
      title : 'OEE - KPI LB3',
      vAxis: {title: '%'},
      hAxis: {title: 'Período'},
      seriesType: 'bars',
      series: {
	1: {type: 'line'},
	2: {type: 'line'}}
    };

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 1200px; height: 500px;"></div>

我需要将此线显示为下图中的红色或紫色线。

Answer 1

我认为您指的是在第一个或最后一个点上放置注释...

如果是这样，请使用calc函数仅返回第一行的注释...

{
  calc: function (dt, row) {
    if (row === 0) {
      return dt.getFormattedValue(row, 3);
    }
    return null;
  },
  type: 'string',
  role: 'annotation'
}

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    drawVisualization();
    window.addEventListener('resize', drawVisualization, false);
  },
  packages:['corechart']
});

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Year',   'Anual',  'Mensal', 'Meta'],
    ['2012',   46.17,    ,         52.5],
    ['2013',   45.34,    ,         52.5],
    ['2014',   45.24,    ,         52.5],
    ['2015',   45.05,    ,         52.5],
    ['2016',   46.69,    ,         52.5],
    ['2016/01',    ,         49.4,       52.5],
    ['2016/02',    ,         49.4,       52.5],
    ['2016/03',    ,         49.4,       52.5],
    ['2016/04',    ,         49.4,       52.5],
    ['2016/05',    ,         49.84,        52.5],
    ['2016/06',    ,         45.34,        52.5],
    ['2016/07',    ,         43.94,        52.5],
    ['2016/08',    ,         49.6,       52.5]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    {
      calc: 'stringify',
      sourceColumn: 1,
      type: 'string',
      role: 'annotation'
    },
    2,
    {
      calc: 'stringify',
      sourceColumn: 2,
      type: 'string',
      role: 'annotation'
    },
    3,
    {
      calc: function (dt, row) {
        if (row === 0) {
          return dt.getFormattedValue(row, 3);
        }
        return null;
      },
      type: 'string',
      role: 'annotation'
    }
  ]);

  var options = {
    title : 'OEE - KPI LB3',
    vAxis: {title: '%'},
    hAxis: {title: 'Período'},
    seriesType: 'bars',
    series: {
      1: {
        color: 'green',
        type: 'line'
      },
      2: {
        color: 'red',
        type: 'line'
      }
    }
  };

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

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