Question

Google charts' line chart

所以，目前，我已经习惯了谷歌排行榜。但是在将来，我想要绘制一个函数。绘制完该线后，我想添加一个动态指标圆，当我调整绘制线的值时，它将沿着线的路径移动。

总结一下：

从函数*
当我调整函数的值时，有一个遍历线路的圆。 （主要问题）

Google图表的新功能，不确定您可以轻松完成此类操作。

可能澄清一下：我将使用滑块来控制一个值，因为我移动滑块线条不会改变，但是一个＆＃34;指示符＆＃34;圆圈将改变位置以适应新值;即随着值的变化动态绘制圆圈。

不确定它是否有帮助，但我当前的图表看起来像这样：

＆＃13;

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

drawChart();

function drawChart() {
	
	
	var data = google.visualization.arrayToDataTable([
		['somVar1', 'someVar2'],
		['0.001'  ,   0.02],
		['0.003'  ,   0.07],
		['0.01'   ,   0.2],
		['0.03'   ,   0.6 ],
		['0.1'    ,   1.8],
		['0.3'    ,   4.8],
		['1'      ,   10],
		['3'      ,   15.2 ],
		['10'     ,   18.2 ],
		['30'     ,   19.4],
		['100'    ,   19.8],
		['300'    ,   19.93],
		['1000'   ,   19.98],

	]);

	//Graph styling and legend
	var options = {
		title: 'sumVar2 (%)',
		curveType: 'function',
		legend: { position: 'bottom' },
		vAxis: { title: 'someVar2 %'},
		hAxis: { title: 'someVar1'}
	};


	var chart = new google.visualization.LineChart(document.getElementById('lineGraph'));

	chart.draw(data, options);
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>


<div id="lineGraph" style="width: 900px; height: 500px"></div>

＆＃13;

*（不幸的是，使用谷歌图表，看起来我必须通过查找值的范围并将它们吐出到数组中来实现这一点 - 而不是直接从数学函数中绘制）

Answer 1

DataView Class可用于提供函数作为系列

的值

使用setColumns方法设置功能

您可以传递现有DataTable列的列索引或
具有计算功能的自定义对象

这里，DataView是从DataTable创建的它使用DataTable中的第一列，
下一列是一个函数

var dataView = new google.visualization.DataView(dataTable);
dataView.setColumns([0, {
  calc: function (data, row) {
    return (2 * data.getValue(row, 0)) + 7;
  },
  type: 'number',
  label: 'Y1'
}]);

您可以设置多个列功能，
但是你不能使用另一个函数中的值，
在同一个DataView中四处走动，引用当前函数中的前一个DataView

否则，您必须将值转储到新表中，
然后在另一个视图中使用新表来设置下一个函数

您可以修改series选项来创建点而不是线，即

series: {
  1: {
    lineWidth: 0,
    pointSize: 8
  }
}

以下工作代码段演示了如何保存对第一个函数的引用，并在以后使用它，例如图表的'ready'事件触发时

＆＃13;

google.charts.load('current', {
  callback: function () {

    // DataTable X only
    var dataTable = google.visualization.arrayToDataTable([
      ['X'],
      [0.001],
      [0.003],
      [0.01],
      [0.03],
      [0.1],
      [0.3],
      [1],
      [3],
      [10],
      [30],
      [100],
      [300],
      [1000],
    ]);

    // use DataView to provide function for Y
    var dataView = new google.visualization.DataView(dataTable);

    // y1=2x+7
    var yCol1 = {
      calc: function (data, row) {
        return (2 * data.getValue(row, 0)) + 7;
      },
      type: 'number',
      label: 'Y1'
    };

    // use above object as Y1
    dataView.setColumns([0, yCol1]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(container);

    // draw Y2 when chart finishes drawing
    google.visualization.events.addOneTimeListener(chart, 'ready', function () {

      // add Y2 column
      dataView.setColumns([0, yCol1, {
        // y2=y1+(2x-1)
        calc: function (data, row) {
          //use reference to previous dataView
          return dataView.getValue(row, 1) + ((2 * data.getValue(row, 0)) - 1);
        },
        type: 'number',
        label: 'Y2'
      }]);

      chart.draw(dataView, {
        series: {
          1: {
            lineWidth: 0,
            pointSize: 8
          }
        }
      });
    });

    chart.draw(dataView);
  },
  packages: ['corechart']
});

＆＃13;

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

＆＃13;

编辑

可以使用相同的概念来避免为X值设置数组

只需要在DataTable上设置初始行数

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: function () {

    // create blank table for the view
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('number', 'X');
    dataTable.addRows(20);

    // use DataView to provide function for X
    var dataView = new google.visualization.DataView(dataTable);
    var xCol = {
      calc: function (data, row) {
        return (row + 1) * 0.3;
      },
      type: 'number',
      label: 'X'
    };
    dataView.setColumns([xCol]);

    // function for Y --> y1=2x+7
    var yCol1 = {
      calc: function (data, row) {
        return (2 * dataView.getValue(row, 0)) + 7;
      },
      type: 'number',
      label: 'Y1'
    };
    dataView.setColumns([xCol, yCol1]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(container);

    // draw Y2 when chart finishes drawing
    google.visualization.events.addOneTimeListener(chart, 'ready', function () {

      // add Y2 column
      dataView.setColumns([xCol, yCol1, {
        // y2=y1+(2x-1)
        calc: function (data, row) {
          //use reference to previous dataView
          return dataView.getValue(row, 1) + ((2 * data.getValue(row, 0)) - 1);
        },
        type: 'number',
        label: 'Y2'
      }]);

      chart.draw(dataView, {
        series: {
          1: {
            lineWidth: 0,
            pointSize: 8
          }
        }
      });
    });

    chart.draw(dataView);
  },
  packages: ['corechart']
});

＆＃13;

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

＆＃13;

如何将指标圈绘制到谷歌图表折线图

1 个答案: