如何在谷歌图表折线图上绘制指标圈

Question

Google charts' line chart

所以，目前，我刚刚习惯了谷歌图表。但在未来，我希望绘制一个函数。绘制该线后，我想添加一个动态指示圆，当我调整绘制该线的值时，该圆将沿着该线的路径行进。

总结一下：

• 从函数中绘制一条永久线*
• 当我调整函数的值时，有一个沿直线路径行进的圆圈。 （主要问题）

刚接触谷歌图表，不知道你能多么容易地做这样的事情。

也许要澄清一下：我将使用滑块来控制一个值，当我移动滑块时，线条不会改变，但“指示器”圆圈会改变位置以适应新值；即随着值的变化动态地绘制一个圆。

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

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>

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

Answer 1

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

使用setColumns方法设置功能

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

这里，DataView 是从 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

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

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

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

下面的工作 sn-p 演示了如何保存对第一个函数的引用，并在以后使用它，例如当图表的 '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 值的数组

只需在 DataTable 上设置初始行数

请参阅以下工作 sn-p...

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>