Javascript 使用java脚本选择Google图表数据以更改数据的序列

Javascript 使用java脚本选择Google图表数据以更改数据的序列,javascript,google-visualization,Javascript,Google Visualization,我花了大量时间研究如何使用java脚本修改输入到我的Google图表折线图中的一系列特定数据,我试图修改的数据通过PHP从MySQL表中获取,然后转换为Json,将其输入到图表的java脚本中 数据是不同公司销售的产品的价格比较,一些公司不销售某些产品,输入0表示不销售该产品。我需要能够隐藏将它们连接到图表上其他数据的0和和和线,这样我们就不会得到这样的结果: 我想隐藏图表底部的数据行,以及在最后一个日期列下降到零的两个数据点 我查看了堆栈溢出,发现了两个看起来很有希望的问题: 在第二个问题之后

我花了大量时间研究如何使用java脚本修改输入到我的Google图表折线图中的一系列特定数据,我试图修改的数据通过PHP从MySQL表中获取,然后转换为Json,将其输入到图表的java脚本中

数据是不同公司销售的产品的价格比较,一些公司不销售某些产品,输入0表示不销售该产品。我需要能够隐藏将它们连接到图表上其他数据的0和和和线,这样我们就不会得到这样的结果:

我想隐藏图表底部的数据行,以及在最后一个日期列下降到零的两个数据点

我查看了堆栈溢出,发现了两个看起来很有希望的问题:

在第二个问题之后,看起来我可以使用java脚本修改值为0的数据所在的系列,但没有给出如何执行此操作的示例。我尝试使用给出的示例,但没有成功地修改它以满足我的需要

<script type="text/javascript">

        var jsonData =<?php echo $JSONdata ?>;    

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', {packages: ['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the Line chart, passes in the data and
        // draws it.
        function drawChart() {

            // Create our data table out of JSON data loaded from server.
            var data = new google.visualization.DataTable(jsonData);

            var colorArray = {}; 
            for(i=0;i<data.getNumberOfRows;i++) {
              if(data.getDataValue(i, 2,3,4,5)==0)//tell it to check data from competitor columns
                colorArray.push({color: 'white', lineWidth:0, pointSize:0});
            };

            var options = {title: 'The Prices for <?php echo $Code ?>',pointSize:5,lineWidth:2,
                vAxis: {title: 'Price (<?php echo substr("£", 1)?>)'},
                hAxis: {title: 'Date (year-month-day)'}, 
       series: {0:{color:'red'}, 1:{color: 'blue'}, 2:{color: 'green'}, 
                3:{color: 'purple'}, 4:{color: 'orange'}, 5:{color: 'teal'},
                6:{color: 'white', lineWidth:0, pointSize:0}} };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw (data,options); 
                      }

    </script>
所以我真的在寻找两个答案中的一个:

修改var colorArray以实现我想要的更改

代码的一个工作位,允许我将值为0的数据更改为系列6中的数据,从而从视图中隐藏

提前感谢大家花时间帮助我解决这个问题


Sam Cook

您要做的是将所有零设置为空,并在绘制图表时在选项中设置InterpoleNulls:true参数:

// Set all zeros in our dataTable to null.
var rows = data.getNumberOfRows();
var cols = data.getNumberOfColumns();
for (var i = 0; i < rows; ++i) {
  for (var j = 0; j < cols; ++j) {
    if (data.getValue(i, j) == 0) {
      data.setCell(i, j, null);
    }
  }
}
// etc..
var element = document.getElementById('visualization');
var chart = new google.visualization.LineChart(element);
chart.draw(data, { interpolateNulls: true });

我得到以下错误:未捕获错误:未定义容器。知道是什么原因吗?找出了我做错的地方,还在为我的工作学习java脚本,回答得很好Jeremy,谢谢你的帮助