如何绘制指标圆到谷歌图表线图

谷歌图表折线图

所以，目前，我刚刚习惯了谷歌图表。但以后，我想画一个函数。一旦画好了这条线，我想添加一个动态指示圆，当我调整绘制这条线的值时，它将沿着这条线的路径移动。

总结一下:

从函数中绘制永久线*
当我调整函数值时，有一个圆沿着线的路径移动。(主要问题)

对谷歌图表不熟悉，不知道做这样的事情有多容易。

澄清一下:我将使用滑块来控制一个值，当我移动滑块时，线不会改变，但是一个"指示器"圆圈会改变位置以适应新的值;即，随着值的变化动态绘制圆。

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

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);
}

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

*(不幸的是，在谷歌图表中，我似乎必须通过查找值的范围并将它们吐出到数组中来实现这一点-而不是能够直接从数学函数中绘制)

DataView类可以用来提供一个函数作为一个系列的值

使用setColumns方法设置函数

可以传递现有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'事件触发

时

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']
});

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

编辑

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

只需要设置数据表的初始行数

请参阅下面的工作代码片段…

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']
});

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

相关内容

最新更新

热门标签：