如何在highchart上为tickPosition提供填充？

时间：2018-08-21 06:47:55

标签： javascript jquery highcharts bullet-chart

我正在使用bullet chart中的highchart来工作类似的进度图，我以某种方式使它看起来像进度图，但是问题是当我的序列数据接近相等时，彼此重叠。请看附件图片After overlap

Before overlap

有什么方法可以在项目符号图表上提供填充，以便数据不会重叠？

$("#progress").highcharts({
        chart: {
            inverted: true,
            marginLeft: 30,
            type: 'bullet'
        },
        title: {
            text: null
        },
        legend: {
            enabled: false
        },
        yAxis: {
            tickPositions: [0, 3000, 3100, 4000],
            gridLineWidth: 0,
            title: "",
            useHTML: true,//Set to true
            style: {
                width: '50px'
            }
        }, xAxis: {
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            labels: {
                enabled: false
            },
            minorTickLength: 0,
            tickLength: 0
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                borderRadius: 10,
                color: '#819bc2',
                targetOptions: {
                    width: '10%'
                },
                grouping: false
            }
        },
        exporting: { enabled: false },
        credits: { enabled: false },
        series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
        tooltip: {
            useHTML: true,
            backgroundColor: null,
            borderWidth: 0,
            positioner: function (labelWidth, labelHeight, point) {
                var tooltipX = point.plotX - 40;
                var tooltipY = point.plotY - 20;
                return {
                    x: tooltipX,
                    y: tooltipY
                };
            },
            pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
     <script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

3 个答案:

答案 0 :(得分：0)

我用jQuery提出了解决方案。可能会有更好的选择，但它应该可以按预期工作：

var lastXPos = 0;
$.each($('#progress svg g text'),function(a,b)
{
  var curXPos = $(this).offset().left;
  if(curXPos - lastXPos < 50)
  {
    $(this).attr('x', (curXPos + 50));
  }
  lastXPos = curXPos;
});

当文本的最后一个x位置在当前x位置的50像素之内时，我只需向当前位置添加另一个50像素。您可以根据需要更改此值。

$("#progress").highcharts({
        chart: {
            inverted: true,
            marginLeft: 30,
            type: 'bullet'
        },
        title: {
            text: null
        },
        legend: {
            enabled: false
        },
        yAxis: {
            tickPositions: [0, 3000, 3100, 4000],
            gridLineWidth: 0,
            title: "",
            useHTML: true,//Set to true
            style: {
                width: '50px'
            }
        }, xAxis: {
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            labels: {
                enabled: false
            },
            minorTickLength: 0,
            tickLength: 0
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                borderRadius: 10,
                color: '#819bc2',
                targetOptions: {
                    width: '10%'
                },
                grouping: false
            }
        },
        exporting: { enabled: false },
        credits: { enabled: false },
        series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
        tooltip: {
            useHTML: true,
            backgroundColor: null,
            borderWidth: 0,
            positioner: function (labelWidth, labelHeight, point) {
                var tooltipX = point.plotX - 40;
                var tooltipY = point.plotY - 20;
                return {
                    x: tooltipX,
                    y: tooltipY
                };
            },
            pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
        }
    });
    var lastXPos = 0;
    $.each($('#progress svg g text'),function(a,b)
    {
      var curXPos = $(this).offset().left;
      if(curXPos - lastXPos < 50)
      {
        $(this).attr('x', (curXPos + 50));
      }
      lastXPos = curXPos;
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
     <script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

答案 1 :(得分：0)

您可以对yaxis标签使用旋转选项，以免文本重叠

$("#progress").highcharts({
        chart: {
            inverted: true,
            marginLeft: 30,
            type: 'bullet'
        },
        title: {
            text: null
        },
        legend: {
            enabled: false
        },
        yAxis: {
            tickPositions: [0, 3000, 3100, 4000],
            gridLineWidth: 0,
            title: "",
            useHTML: true,//Set to true
           
            labels: {
                rotation : 320
            },
            
        }, xAxis: {
            minorGridLineWidth: 0,
            lineColor: 'transparent',
           
            minorTickLength: 0,
            tickLength: 0,
        },
        allowOverlap : false,
        padding : 10,
        plotOptions: {
            series: {
                borderWidth: 0,
                borderRadius: 10,
                color: '#819bc2',
                targetOptions: {
                    width: '10%'
                },
                
                grouping: false
            }
        },
        exporting: { enabled: false },
        credits: { enabled: false },
        series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
        tooltip: {
            useHTML: true,
            backgroundColor: null,
            borderWidth: 0,
            positioner: function (labelWidth, labelHeight, point) {
                var tooltipX = point.plotX - 40;
                var tooltipY = point.plotY - 20;
                return {
                    x: tooltipX,
                    y: tooltipY
                };
            },
            pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
     <script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

答案 2 :(得分：0)

填充不适用于yAxis上的标签。这可能是使用tickPositions

的副作用
  

一个数组，定义刻度线在轴上的位置。这将覆盖tickPixelInterval和tickInterval的默认行为。

作为替代解决方案，您可以使用rotation：

yAxis: {
  labels: {
    rotation: -45
  },
...
}


$("#progress").highcharts({
  chart: {
    inverted: true,
    marginLeft: 30,
    type: 'bullet'
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  yAxis: {
    tickPositions: [0, 3000, 3100, 4000],
    gridLineWidth: 0,
    title: "",
    labels: {
      rotation: -45
    }
  },
  xAxis: {
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    minorTickLength: 0,
    tickLength: 0
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      borderRadius: 10,
      color: '#819bc2',
      targetOptions: {
        width: '10%'
      },
      grouping: false
    }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    "data": [{
      "y": 4000,
      "target": 4000,
      "color": "#ccd8e9"
    }]
  }, {
    "data": [{
      "y": 3100,
      "target": 3100,
      "color": "#ff4666"
    }]
  }, {
    "data": [{
      "y": 3000,
      "target": 3000,
      "color": "#2F9AD0"
    }]
  }],
  tooltip: {
    useHTML: true,
    backgroundColor: null,
    borderWidth: 0,
    positioner: function(labelWidth, labelHeight, point) {
      var tooltipX = point.plotX - 40;
      var tooltipY = point.plotY - 20;
      return {
        x: tooltipX,
        y: tooltipY
      };
    },
    pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

JSFiddle示例： https://jsfiddle.net/ewolden/jgezt8xm/7/

enter image description here

您也可以使用staggerLines：

yAxis: {
  labels: {
    staggerLines: 2
  },
...
}


$("#progress").highcharts({
  chart: {
    inverted: true,
    marginLeft: 30,
    type: 'bullet'
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  yAxis: {
    tickPositions: [0, 3000, 3100, 4000],
    gridLineWidth: 0,
    title: "",
    labels: {
      staggerLines: 2
    }
  },
  xAxis: {
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    minorTickLength: 0,
    tickLength: 0
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      borderRadius: 10,
      color: '#819bc2',
      targetOptions: {
        width: '10%'
      },
      grouping: false
    }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    "data": [{
      "y": 4000,
      "target": 4000,
      "color": "#ccd8e9"
    }]
  }, {
    "data": [{
      "y": 3100,
      "target": 3100,
      "color": "#ff4666"
    }]
  }, {
    "data": [{
      "y": 3000,
      "target": 3000,
      "color": "#2F9AD0"
    }]
  }],
  tooltip: {
    useHTML: true,
    backgroundColor: null,
    borderWidth: 0,
    positioner: function(labelWidth, labelHeight, point) {
      var tooltipX = point.plotX - 40;
      var tooltipY = point.plotY - 20;
      return {
        x: tooltipX,
        y: tooltipY
      };
    },
    pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

JSFiddle示例： https://jsfiddle.net/ewolden/jgezt8xm/5/

enter image description here

相关问题
最新问题