javascript - 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/