如何繪製指示燈圈到谷歌圖表線圖

Question

Google charts' line chart

所以，此刻，我只是習慣了谷歌的圖表。但在未來，我正在尋找一個功能。一旦繪製了該線條，我想添加一個動態指標圓，在調整繪製線條的值時沿着線條的路徑行進。

所以總結：

• 情節永久線從功能*
• 有我調整功能的值行進線路的路徑一圈。 （主要問題）

新的谷歌圖表，不知道你是如何輕鬆地做這樣的事情。我可以使用滑塊來控制一個值，因爲我移動滑塊時線條不會改變，但是「指示器」圓圈將改變位置以適應新的值;即隨着數值的變化動態繪製一個圓。

不知道是否有幫助，但我目前的圖形看起來簡直像這樣：

google.charts.load('current', {'packages':['corechart']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
drawChart(); 
 

 
function drawChart() { 
 
\t 
 
\t 
 
\t var data = google.visualization.arrayToDataTable([ 
 
\t \t ['somVar1', 'someVar2'], 
 
\t \t ['0.001' , 0.02], 
 
\t \t ['0.003' , 0.07], 
 
\t \t ['0.01' , 0.2], 
 
\t \t ['0.03' , 0.6 ], 
 
\t \t ['0.1' , 1.8], 
 
\t \t ['0.3' , 4.8], 
 
\t \t ['1'  , 10], 
 
\t \t ['3'  , 15.2 ], 
 
\t \t ['10'  , 18.2 ], 
 
\t \t ['30'  , 19.4], 
 
\t \t ['100' , 19.8], 
 
\t \t ['300' , 19.93], 
 
\t \t ['1000' , 19.98], 
 

 
\t ]); 
 

 
\t //Graph styling and legend 
 
\t var options = { 
 
\t \t title: 'sumVar2 (%)', 
 
\t \t curveType: 'function', 
 
\t \t legend: { position: 'bottom' }, 
 
\t \t vAxis: { title: 'someVar2 %'}, 
 
\t \t hAxis: { title: 'someVar1'} 
 
\t }; 
 

 

 
\t var chart = new google.visualization.LineChart(document.getElementById('lineGraph')); 
 

 
\t 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創建，
它使用從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' 
}]); 

可以設置多列功能，
但在相同的數據視圖
你不能從另外一個功能，
使用的值來解決，參考以前的數據視圖當前功能

否則，您將不得不將這些值轉儲到新表中，然後在另一個視圖中使用新表來設置下一個功能

您可以修改series選項以創建點r而不是一條線，即

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>

編輯

可以使用相同的概念d以避免爲X值的數組以及

只需要設置在一個DataTable

行的初始數量參見下列工作片斷...

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>