javascript - 带有图标的 Google Chart API 行显示 Javascript 错误 : undefined is not a function

Question

我正在尝试构建一个在底部显示温度和天气图标的图表。

在最后一行数据中使用 'new Date ()' 时，出现 javascript 错误:“undefined is not a function”。

创建了一个 JSFiddle 示例，错误变为:“a[jc] 不是函数”

如果最后一行数据变成:['',79,94]，而不是:[new Date(2015, 6, 7), 79, 85]，然后图标正确对齐(不是所有的都聚集到左边)错误消失但日期格式为完整 Sat Jul 04 2015 00:00:00 GMT-0400 Eastern Daulight Time。

google.load("visualization", '1', {
  packages: ['corechart']
});

google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Date', 'Past Avg temp F', 'Forecast Avg Temp F'],
    [new Date(2015, 6, 4), 85, 90],
    [new Date(2015, 6, 5), 89, 85],
    [new Date(2015, 6, 6), 80, 84],
    [new Date(2015, 6, 7), 79, 85]
    //,    ['',79,94]
  ]);

  var options = {
    chartArea: {
      left: '5%',
      width: '89%',
      bottom: '5%',
      right: '7%'
    },
    height: 100,
    legend: {
      position: 'top',
      textStyle: {
        fontSize: 10,
        bold: true
      }
    },
    //animation: {"startup": true,duration: 1000,easing: 'in'},
    tooltip: {
      textStyle: {
        fontSize: 10
      },
      showColorCode: true
    },
    vAxes: {
      1: {
        textStyle: {
          fontSize: 10
        },
        viewWindowMode: 'explicit',
        viewWindow: {
          max: 100,
          min: 70
        },
        gridlines: {
          count: 3
        }
      },
      0: {
        textStyle: {
          fontSize: 10
        },
        viewWindowMode: 'explicit',
        viewWindow: {
          max: 100,
          min: 70
        },
        gridlines: {
          count: 3
        }
      }
    },

    hAxis: {
      textStyle: {
        fontSize: 10
      },
      format: 'MMM dd',
      showTextEvery: '1'
    },
    series: {
      1: {
        type: "line",
        color: '#DC3912',
        targetAxisIndex: 1,
        curveType: 'function'
      },
      0: {
        type: "line",
        color: '#3366CC',
        targetAxisIndex: 0,
        curveType: 'function'
      }
    }
  };

  function placeMarker(dataTable) {
    var cli = this.getChartLayoutInterface();
    var chartArea = cli.getChartAreaBoundingBox();

    document.querySelector('.w1-m1').style.top = Math.floor(cli);
    document.querySelector('.w1-m1').style.left = Math.floor(cli.getXLocation(0)) - 0 + "px";
    document.querySelector('.w1-m2').style.top = Math.floor(cli);
    document.querySelector('.w1-m2').style.left = Math.floor(cli.getXLocation(1)) - 0 + "px";
    document.querySelector('.w1-m3').style.top = Math.floor(cli);
    document.querySelector('.w1-m3').style.left = Math.floor(cli.getXLocation(2)) - 0 + "px";
    document.querySelector('.w1-m4').style.top = Math.floor(cli);
    document.querySelector('.w1-m4').style.left = Math.floor(cli.getXLocation(3)) - 0 + "px";
  }

  var chart = new google.visualization.LineChart(document.getElementById('line-chart-marker-currentforecast'));
  google.visualization.events.addListener(chart, 'ready',
    placeMarker.bind(chart, data));
  chart.draw(data, options);
}

#section_fact_aff_sales {
  width: 100%;
  height: 80%;
  max-height: 230px;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
}
.Weather_Chart_CurrentForecast {
  width: 100%;
  height: 100%;
  min-height: 10px;
  float: left;
}
.line-chart-marker-currentforecast {
  width: 100%;
  height: 10%;
  float: left;
  margin-left: 3%;
  margin-top: 1%;
  position: relative
}
.w1-m1 {
  width: 4%;
  height: 4%;
  position: absolute;
}
.w1-m2 {
  width: 4%;
  height: 4%;
  position: absolute;
}
.w1-m3 {
  width: 4%;
  height: 4%;
  position: absolute;
}
.w1-m4 {
  width: 4%;
  height: 4%;
  position: absolute;
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="section_fact_aff_sales">
    <div id="comb_chart_div" style="border: 1px solid #CFCFCF;width:98%;height: 95%;background-color: #fff;">
      <div class="Weather_Chart_CurrentForecast">
        <div id="line-chart-marker-currentforecast"></div>
        <div class="w1-m1">
          <img src="http://icons.wxug.com/i/c/k/clear.gif" height="100%">
        </div>
        <div class="w1-m2">
          <img src="http://icons.wxug.com/i/c/k/chancetstorms.gif" height="100%">
        </div>
        <div class="w1-m3">
          <img src="http://icons.wxug.com/i/c/k/clear.gif" height="100%">
        </div>
        <div class="w1-m4">
          <img src="http://icons.wxug.com/i/c/k/chancetstorms.gif" height="100%">
        </div>
      </div>
    </div>
  </div>

Answer 1

当第一列的类型是date时，传递给cli.getXLocation的参数必须是一个Date-object(它应该在存储的范围内日期)，例如

cli.getXLocation(new Date(2015, 6, 4))

示例(与您的有点不同，我删除了不相关的部分并将天气状况存储在 dataTable 中):

google.load("visualization", '1', { packages: ['corechart']});
google.setOnLoadCallback(function() {

  var data = new google.visualization.arrayToDataTable([
              ['Date', 'Past Avg temp F', 'Forecast Avg Temp F'],
              [{v:new Date(2015, 6, 4),p:{c:'chanceflurries'}}, 85, 90],
              [{v:new Date(2015, 6, 5),p:{c:'chancetstorms'}} , 89, 85],
              [{v:new Date(2015, 6, 6),p:{c:'clear'}}         , 80, 84],
              [{v:new Date(2015, 6, 7),p:{c:'chancerain'}}    , 79, 85]
             ]),
  chart   = new google.visualization
      .LineChart(document.getElementById('line-chart-marker-currentforecast'));
  
  google.visualization.events.addListener(chart, 'ready', function() {
  
    var cli = chart.getChartLayoutInterface();

    for (var i = 0; i < data.getNumberOfRows(); ++i) {
      (function(row) {
      
        var condition = data.getProperty(row, 0, 'c');
        if (condition) {
          var icon = new Image(),
            left = Math.round(cli.getXLocation(data.getValue(row, 0)));
          icon.src = 'http://icons.wxug.com/i/c/k/' + condition + '.gif';
          icon.style.cssText = 'left:' + left + 
             'px;position:absolute;margin-top:-20px;width:20px;height:20px;'
          document.querySelector('#comb_chart_div>.Weather_Chart_CurrentForecast')
            .appendChild(icon);
        }
      }(i))
    }
  });
  chart.draw(data, {});
});

<script type="text/javascript" 
        src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="section_fact_aff_sales">
  <div id="comb_chart_div">
    <div class="Weather_Chart_CurrentForecast">
      <div id="line-chart-marker-currentforecast"></div>
    </div>
  </div>
</div>