2017-05-25 15 views
3

ハイチャートへの新規ユーザーで、現在チャートをいくつか書いていて問題が発生しています。拡大チャートを表示しない限り、ハイチャートのスプラインチャートのポイントが表示されない

グラフの各点のマーカーは、グラフが1日または2日にズームされるまで表示されず、ポイントが非常に小さい場合でも表示されません。

グラフには通常1日に複数のポイントがあるので、ズームしないと1つのグラフに何百もの数字が表示されます。ズームイン

enter image description here

ズームインない

enter image description here

私の質問は、私はポイントをわずかに大きくすることができる方法で、そしてさらに重要なことにはズームインしていない時に表示さ?

私はマーカーのサイズを変更しようとしましたが、拡大またはホバーすると拡大表示されるように見えます。ここで私は、ズームなしのマーカーのショーを作るしようとした方法です:

plotOptions: { 
    series: { 
     marker: { 
     radius:10, 
     }, 
    }, 
    },` 

ここでのポイントは、唯一のズームに表示する方法を示し、抜粋です:

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) { 
 

 
    Highcharts.chart('container', { 
 
     chart: { 
 
      zoomType: 'x' 
 
     }, 
 
     title: { 
 
      text: null 
 
     }, 
 
     xAxis: { 
 
      type: 'datetime' 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'Exchange rate' 
 
      } 
 
     }, 
 
     legend: { 
 
      enabled: false 
 
     }, 
 
     plotOptions: { 
 
      area: { 
 
       fillColor: { 
 
        linearGradient: { 
 
         x1: 0, 
 
         y1: 0, 
 
         x2: 0, 
 
         y2: 1 
 
        }, 
 
        stops: [ 
 
         [0, Highcharts.getOptions().colors[0]], 
 
         [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
 
        ] 
 
       }, 
 
       marker: { 
 
        radius: 2 
 
       }, 
 
       lineWidth: 1, 
 
       states: { 
 
        hover: { 
 
         lineWidth: 1 
 
        } 
 
       }, 
 
       threshold: null 
 
      } 
 
     }, 
 

 
     series: [{ 
 
      type: 'area', 
 
      name: 'USD to EUR', 
 
      data: data 
 
     }] 
 
    }); 
 
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

すべてのヘルプ感謝しています。

ありがとうございました。

答えて

3

回答を検索した後、私は見つからなかったものを見つけました。

マーカーオプションを囲んでいたはずのplotOptions内にシリーズオプションがありませんでした。

次のコードを追加して、希望の出力を得ました。

コード:

plotOptions: { 
    series: { 
    marker: { 
    enabled: true, 
     radius: 2 
    } 
    } 
} 

結果:

enter image description here

関連する問題