2017-12-18 12 views
1

株価チャートを使用する場合は、comparisonModeに日付を使用しています。十字線で表示される値は正しいですが、ツールチップの値は実際の値です(比較されません)。代わりに比較値を表示するにはどうすればよいですか?Anystock comparisonModeツールチップの同じ値

sample

あなたが絵に見ることができるように、比較値は107.1ですが、ツールチップが実際の値893.5が表示されています。私は任意の表を使用しています8.0.0

答えて

2

私はAnyStockの新しいバージョンで算出した変化値は、ポイント情報から利用できる権利である8.1.0ことを通知してくれてうれしいです。ツールチップや伝説に使用される可能性があります。私はこれがまさにあなたが探していたものだと思います。 この機能の使用例はon this linkです。 各ポイントのコンテキストには、valueChangeプロパティとvaluePercentChangeプロパティが含まれます。

+0

こんにちはAnychartチーム、素晴らしい図書館。 anychartがExcelシートをオンラインで表示できるかどうかを購入する前に知りたいのですか?これはこのページとは無関係なので、いつでも[ここ](https://chat.stackoverflow.com/rooms/17/javascript)でpingできます。ありがとう。 –

+0

@Mr_Green AnyChartに興味をお持ちいただきありがとうございます! Googleの図書館は、Google Spreadsheetからチャートにデータを読み込み、.xlsxファイルにエクスポートしてダウンロードすることができます。しかし、残念なことに、図書館ではExcelシートをオンラインで表示することはできません。これらの機能の詳細については、次の記事をご覧ください:https://docs.anychart.com/Working_with_Data/Data_Adapter/Loading_Google_Spreadsheet and https://docs.anychart.com/Common_Settings/Exports#excel –

1

この機能には、JSコードの追加行が必要です。比較された値は、十字線のラベル、ツールチップ、および凡例に表示されます。

anychart.onDocumentReady(function() { 
 
    var dataTable = anychart.data.table(); 
 
    dataTable.addData(get_dji_daily_short_data()); 
 

 
    var firstMapping = dataTable.mapAs({'value': 1}); 
 
    var secondMapping = dataTable.mapAs({'value': 3}); 
 

 
    chart = anychart.stock(); 
 

 

 
    var plot = chart.plot(); 
 
    var series0 = plot.line(firstMapping); 
 
    var series1 = plot.line(secondMapping); 
 

 
    var yScale = plot.yScale(); 
 

 
    // Set comparison mode. 
 
    yScale.comparisonMode("value"); 
 

 
    var xScale = chart.xScale(); 
 

 
    chart.container("container"); 
 
    chart.draw(); 
 

 
    //reference points of both series 
 
    var firstVisibleValue0 = null; 
 
    var firstVisibleValue1 = null; 
 

 
    //after chart rendering format tooltip and legend 
 
    getVisibleValues(); 
 
    tooltipLegendFormat(firstVisibleValue0, firstVisibleValue1); 
 

 
    //after every scroll change recalculate reference points 
 
    //and reformat tooltip and legend 
 
    chart.scroller().listen('scrollerchange', function() { 
 
     getVisibleValues(); 
 
     tooltipLegendFormat(firstVisibleValue0, firstVisibleValue1); 
 
    }); 
 

 
    function getVisibleValues() { 
 
     // Gets scale minimum. 
 
     var minimum = xScale.getMinimum(); 
 
     //select data from mappings 
 
     var selectable0 = firstMapping.createSelectable(); 
 
     var selectable1 = secondMapping.createSelectable(); 
 
     // Sets value for search. 
 
     var select0 = selectable0.search(minimum, "nearest"); 
 
     var select1 = selectable1.search(minimum, "nearest"); 
 
     // get values in first visible points 
 
     firstVisibleValue0 = select0.get('value'); 
 
     firstVisibleValue1 = select1.get('value'); 
 
    } 
 

 
    function tooltipLegendFormat(firstVisibleValue0, firstVisibleValue1) { 
 
     //format tooltips and legends of both series 
 
     series0.tooltip().format(function() { 
 
      return 'Series 0: ' + Math.round(this.value - firstVisibleValue0); 
 
     }); 
 
     series0.legendItem().format(function(){ 
 
      return 'Series 0: ' + Math.round(this.value - firstVisibleValue0); 
 
     }); 
 
     series1.tooltip().format(function() { 
 
      return 'Series 1: ' + Math.round(this.value - firstVisibleValue1); 
 
     }); 
 
     series1.legendItem().format(function(){ 
 
      return 'Series 1: ' + Math.round(this.value - firstVisibleValue1); 
 
     }); 
 
    } 
 

 
});
html, body, #container { 
 
      width: 100%; 
 
      height: 100%; 
 
      margin: 0; 
 
      padding: 0; 
 
     }
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-base.min.js"></script> 
 
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-stock.min.js"></script> 
 
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-exports.min.js"></script> 
 
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-ui.min.js"></script> 
 
    <script src="https://cdn.anychart.com/csv-data/dji-daily-short.js"></script> 
 
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/css/anychart-ui.min.css" /> 
 
    
 
    <div id="container"></div>

+0

これはどのように機能するのでしょうか。しかし、すでに十字の位置に比較値が表示されているため、この値をデフォルトでツールチップに表示できませんでしたか?あなたはすでにそれをコンパイルする必要があります。もし私がこのコードを書いたら、私は基本的にそれをやり直します。これはあまり効率的ではありません。 – Guillaume