将第二个散点系列与侧面对齐，类似于柱形图和条形图使用 HighCharts 的方式

Question

我正在创建图表，到目前为止发现散点图和误差条组合图表最合适。添加一对额外的系列时我遇到了一个问题，因为我使用了散点图，它们被放置在彼此之上。

This is the standard view for the chart which is correct:

This is what I WANT to happen when I add an extra pair of series data:

But this is what happens:

        var chart;
         $(function () {
             $('#container').highcharts({
                 title: {
                     text: 'Chart'
                 },
                 tooltip: {
                     enabled: false
                 },
                 xAxis: [{
                     categories: ['Col1', 'Col2', 'Col3']
                 }],
                 yAxis: [{ // Primary yAxis
                     title: {
                         text: 'Chart'
                     }, opposite: true

                 }
                 , { // Secondary yAxis
                     title: {
                         text: 'Score'
                     }

                 }],
                 plotOptions: {
                     scatter: {
                         dataLabels: {
                             enabled: true,
                             x: 0,
                             y: 10
                         },
                         enableMouseTracking: false
                     },
                     errorbar: {
                         dataLabels: {
                             enabled: true
                         },
                         enableMouseTracking: false
                     }

                 },
                 series: [{
                     name: 'Value',
                     type: 'scatter',
                     yAxis: 1,
                     data: [1001.418, 1000.006, 1005.237],
                     dataLabels: {
                         backgroundColor: Highcharts.getOptions().colors[0],
                         padding: 3,
                         color: '#ffffff',
                         style: {
                             "textShadow": "none",
                             "lineHeight": "13px"
                         },
                         useHTML:true
                     },
                     marker: {
                         symbol: "square"
                     },
                 }, {
                     type: 'errorbar',
                     whiskerColor: '#555',
                     stemColor: '#555',
                     yAxis: 1,
                     data: [[1000.46, 1002.376], [999.071, 1000.941], [1002.753, 1007.721]]
                     
                 },
                          //START extra data
                  {
                            name: 'Compare',
                            type: 'scatter',
                            yAxis: 1,
                            data: [1001.918, 1000.506, 1005.737],
                            dataLabels: {
                                backgroundColor: Highcharts.getOptions().colors[1],
                                padding: 3,
                                style: {
                                    "textShadow": "none",
                                    "lineHeight": "13px"
                                },
                                useHTML:true
                            },
                            marker: {
                                symbol: "square"
                            },
                        }, {
                            type: 'errorbar',
                            whiskerColor: '#555',
                            stemColor: '#555',
                            yAxis: 1,
                            data: [[1001.46, 1003.376], [1000.071, 1001.941], [1003.753, 1006.721]]
                     
                        },
                          //END extra data
                 {
                     //force the ErrorBar icon into the legend
                     name: 'ErrorBar',
                     type: 'scatter',
                     marker: {
                         symbol: "url(data:image/gif;base64,R0lGODlhDwAMAIAAAFVVVf///yH5BAEHAAEALAAAAAAPAAwAAAIXhI8ZywEN4Yt0UnmjzWtzn4GXWFXJeRQAOw==)"
                     },
                     data:[null]
                 }
                 ]
             });
         });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

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

http://jsfiddle.net/ewurrLgk/

我查看了 API 并尝试使用其他图表类型，例如 Line 和 Column，尽管它们确实正确对齐，但错误栏几乎没有消失，因为这些图表类型从零开始。我也尝试过 pointPlacement 但这只是将它们都移到了中间。我想做的事情是不是无法使用散点图？

Answer 1

您应该使用 pointPlacement，但要根据特定系列进行设置。我为你准备了一个缩小的演示：

series: [{
        type: 'scatter',
        pointPlacement:-0.2,
        data: [51,73]
    },{
        type: 'scatter',
        pointPlacement:0.2,
        data: [8,7.6]
    },{
        type: 'errorbar',
        pointPlacement:-0.2,
        data: [[48, 51], [68, 73]]
    }, {
        type: 'errorbar',
        pointPlacement:0.2,
        data: [[6, 8], [5.9, 7.6]]
    }]

http://jsfiddle.net/6e749xx9/1/

将第二个散点系列与侧面对齐，类似于柱形图和条形图使用 HighCharts 的方式

Align second scatter series to the side similar to how column and bar charts do using HighCharts

javascript

css

highcharts