ハイチャート - HTMLテーブルから複数のシリーズを含む散布図を作成する方法

Question

ハイチャートグラフをHTMLテーブルにリンクしようとしていますが、2つのリンクを正しく表示できますが、ドキュメントを見つけることができません。 散布図の複数のシリーズを定義する方法の例はです。私が見つけることができるものはすべて、ばらばらに翻訳されない棒グラフまたは折れ線グラフです。

私はswitchRowsAndColumns:trueを使用しようとしましたが、グラフがエラーになります。私は複数の列を使ってシリーズを追加しようとしましたが、途中で動作しますが、x値を定義することはできません（行xをx、値yをyとして入力します）。追加のシリーズの残りのフィールド（名前、ユーザー、日付など）

提案がありますか？

Highcharts.setOptions({ 
 
    lang: { 
 
     thousandsSep: "", 
 
    } 
 
}); 
 

 
Highcharts.chart('container', { 
 
    data: { 
 
     table: 'datatable', 
 
     firstRowAsNames: false, 
 
     startRow: 1, 
 
     seriesMapping: [{ 
 
      Type: 0, 
 
      x: 1, 
 
      y: 2, 
 
      name: 3, 
 
      Owner: 4, 
 
      Notes: 5, 
 
      DAdd: 6, 
 
      Pic: 7, 
 
     }], 
 
    }, 
 
    series: [{ 
 
     name: 'First Series' 
 
    }, { 
 
     name: 'Second Series' 
 
    }], 
 
    chart: { 
 
     type: 'scatter', 
 
     plotBorderWidth: 1, 
 
     zoomType: 'xy', 
 
     marginLeft: 200, 
 
    }, 
 
    legend: { 
 
     enabled: true, 
 
     layout: 'vertical', 
 
     align: 'left', 
 
     verticalAlign: 'top', 
 
     floating: true, 
 
     y: 40, 
 
     x: -20, 
 
     footer: { 
 
      text: 'Click and drag to select an area to zoom' 
 
     }, 
 
     title: { 
 
      text: 'Categories', 
 
      style: { 
 
       fontStyle: 'italic' 
 
      } 
 
     }, 
 
    }, 
 
    xAxis: { 
 
     gridLineWidth: 1, 
 
     max: 4500, 
 
     min: -4500, 
 
     tickInterval: 1000, 
 
     title: { 
 
      text: '' 
 
     }, 
 
     labels: { 
 
      format: '{value}' 
 
     }, 
 
     plotLines: [{ 
 
      color: 'gray', 
 
      dashStyle: 'dot', 
 
      width: 2, 
 
      tickAmount: 5, 
 
      value: 0, 
 
      label: { 
 
       rotation: 0, 
 
       y: 0, 
 
       style: { 
 
        fontStyle: 'italic' 
 
       }, 
 
      }, 
 
      zIndex: 3 
 
     }] 
 
    }, 
 
    yAxis: { 
 
     startOnTick: false, 
 
     endOnTick: false, 
 
     reversed: true, 
 
     tickInterval: 1000, 
 
     max: 4500, 
 
     min: -4500, 
 
     title: { 
 
      text: '' 
 
     }, 
 
     labels: { 
 
      format: '{value}' 
 
     }, 
 
     maxPadding: 0.2, 
 
     plotLines: [{ 
 
      color: 'gray', 
 
      dashStyle: 'dot', 
 
      tickAmount: 5, 
 
      width: 2, 
 
      value: 0, 
 
      label: { 
 
       align: 'right', 
 
       style: { 
 
        fontStyle: 'italic' 
 
       }, 
 
       x: 0 
 
      }, 
 
      zIndex: 3 
 
     }] 
 
    }, 
 
    plotOptions: { 
 
     series: { 
 
      dataLabels: { 
 
       enabled: true, 
 
       format: '{point.name}', 
 
      }, 
 
      stickyTracking: false, 
 
     }, 
 
     tooltip: { 
 
      snap: 0 
 
     } 
 
    }, 
 

 
    tooltip: { 
 
     useHTML: true, 
 
     headerFormat: '<table class="chartinfo">', 
 
     pointFormat: '<tr><th colspan="2"><h3>{point.name}</h3></th></tr>' + 
 
      '<tr><th>Coordinates:</th><td>{point.x},{point.y}</td></tr>' + 
 
      '<tr><th>Owner:</th><td>{point.Owner}</td></tr>' + 
 
      '<tr><th>Type:</th><td>{point.Type}</td></tr>' + 
 
      '<tr><th>Notes:</th><td>{point.Notes}</td></tr>' + 
 
      '<tr><th>Date Added:</th><td>{point.DAdd}</td></tr>' + 
 
      '<tr><th colspan=2><img src="{point.Pic}" style="width:200px;height:100px;" align="center"</th></tr>', 
 
     footerFormat: '</table>', 
 
     followPointer: false, 
 
     hideDelay: 30, 
 
    }, 
 
});

#container { 
 
     height: 700px; 
 
     width: 800px; 
 
     text-align: left; 
 
     margin: 20 20 20 20; 
 
     z-index: 20; 
 
     } 
 
    #datatable { 
 
     border-collapse: collapse; 
 
     font-size: 0.8em; 
 
    } 
 
    td, th {border: 1px solid black;}

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
    <script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
    <script src="https://code.highcharts.com/modules/data.js"></script> 
 
    <script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container"></div> 
 

 
<table id="datatable"> 
 
    <thead> 
 
     <tr> 
 
      <th></th> 
 
      <th>x</th> 
 
      <th>y</th> 
 
      <th>Name</th> 
 
      <th>Owner</th> 
 
      <th>Notes</th> 
 
      <th>Date Added</th> 
 
      <th>Image</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <th>Series 1</th> 
 
      <td>1000</td> 
 
      <td>1000</td> 
 
      <td>Object 1</td> 
 
      <td>Username1</td> 
 
      <td>Misc Notes</td> 
 
      <td>2017.10.01</td> 
 
      <td>https://i.imgur.com/LhTKfSj.png</td> 
 
     </tr> 
 
     <tr> 
 
      <th>Series 1</th> 
 
      <td>-1000</td> 
 
      <td>1000</td> 
 
      <td>Object 2</td> 
 
      <td>Username2</td> 
 
      <td>Misc Notes</td> 
 
      <td>2017.10.01</td> 
 
      <td>https://i.imgur.com/LhTKfSj.png</td> 
 
     </tr> 
 
     <tr> 
 
      <th>Series 2</th> 
 
      <td>-1000</td> 
 
      <td>-1000</td> 
 
      <td>Object 3</td> 
 
      <td>Username3</td> 
 
      <td>Misc Notes</td> 
 
      <td>2017.10.01</td> 
 
      <td>https://i.imgur.com/LhTKfSj.png</td> 
 
     </tr> 
 
     <tr> 
 
      <th>Series 2</th> 
 
      <td>1000</td> 
 
      <td>-1000</td> 
 
      <td>Object 4</td> 
 
      <td>Username4</td> 
 
      <td>Misc Notes</td> 
 
      <td>2017.10.01</td> 
 
      <td>https://i.imgur.com/LhTKfSj.png</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 1

あなただけcompleteコールバック関数（http://api.highcharts.com/highcharts/data.complete）を使用して、チャートのコンストラクタに渡す渡す前に、グラフのオプションを変更することができます。

complete: function(options) { 
    // create the second series 
    options.series.push({ 
    data: [] 
    }); 

    // move the data to the second series 
    var d0 = options.series[0].data, 
    d1 = options.series[1].data; 

    d1.push(d0.pop(), d0.pop()); 

} 

をライブ作業のデモ：：次のようになり可能で、あなたの例では

http://jsfiddle.net/kkulig/72xkzsxv/