Highcharts - 如何从HTML表格中制作多个系列的散点图

Question

我试图将一个highcharts图表与一个HTML表格链接起来，看起来我可以将这两个链接连接起来，但是我无法找到任何文档或关于如何定义多个系列的例子散点图 - 我能找到的所有东西都是一个条形图或折线图，它不能很好地转换成散点图。

我试过使用switchRowsAndColumns:true但导致图形出错。我甚至尝试过使用多列来添加系列，这个系列可以工作一半，但不允许我定义x值（它将行作为x，将我输入的值作为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/