2017-05-25 56 views
3

我是新來的Highcharts,我正在寫一些圖表並遇到問題。Highcharts樣條圖表點不顯示,除非放大

圖表中每個點的標記都是不可見的,直到圖表放大到1或2天內,即使這樣點數非常小。

我認爲值得注意的是,我的圖表上每天通常會有多個點,所以在未縮放時可能會有數百個圖。

不放大:

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