Question

我的应用程序中有一个Highchart，显示每个月的汽车销量。给定用户输入的日期值，图表应显示最近12个月的汽车销量。如果用户过滤日期为2018-09-10，则应显示2017年9月，2017年10月，2017年11月，2017年12月，2018年1月，2018年2月，2018年3月，2018年4月，5月的汽车销量-2018年6月2018年7月2018年8月2018年9月2018年10月2018年11月2018年12月

此外，我还需要在图表本身中显示年份分隔。我找到了类似的图像。我的图表中也需要类似的内容。有什么办法可以做到吗？

以下小提琴包含示例代码。我需要显示2017年和2018年的年份分隔。

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Car Sales'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Total percent Car Sales'
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    "series": [
        {
            "name": "Car Sales",
            "colorByPoint": true,
            "data": [
                {
                    "name": "July",
                    "y": 62.74
                },{
                    "name": "August",
                    "y": 62.74
                },{
                    "name": "September",
                    "y": 62.74
                },{
                    "name": "October",
                    "y": 62.74
                },{
                    "name": "November",
                    "y": 62.74
                },{
                    "name": "December",
                    "y": 62.74
                },{
                    "name": "January",
                    "y": 62.74
                },
                {
                    "name": "February",
                    "y": 10.57
                },
                {
                    "name": "March",
                    "y": 7.23
                },
                {
                    "name": "April",
                    "y": 5.58
                },
                {
                    "name": "May",
                    "y": 4.02
                },
                {
                    "name": "June",
                    "y": 1.92
                },
                {
                    "name": "July ",
                    "y": 7.62
                }
            ]
        }
    ]
});

https://jsfiddle.net/yasirunilan/8xvjcd5h/1/

Answer 1

您可以使用Highcharts.SVGRenderer创建带有年份的分隔线和文本。如果在xAxis上始终有类别，则可以通过以下方式做到这一点：

function renderSeparator(xVal, chart, year) {
  var xAxis = chart.xAxis[0],
    pxVal = xAxis.toPixels(xVal + 0.5);

  chart.renderer.path([
    'M', pxVal, chart.plotTop,
    'L', pxVal, chart.plotTop + chart.plotHeight
  ]).attr({
    stroke: 'black',
    'stroke-width': 1
  }).add();

  chart.renderer.text(
    year, pxVal + 10, 70
  ).css({
    color: 'black',
    fontSize: 20
  }).attr({
    zIndex: 6
  }).add();
}

// Create the chart
Highcharts.chart('container', {
  chart: {
    events: {
      render: function() {
        var chart = this,
          xAxis = chart.xAxis[0],
          year = 2014;

        chart.renderer.text(year, chart.plotLeft + 10, 70)
          .css({
            color: 'black',
            fontSize: 20
          })
          .attr({
            zIndex: 6
          })
          .add();

        year++;

        Highcharts.each(xAxis.names, function(el, i) {
          if (el === "December") {
            renderSeparator(i, chart, year);
            year++;
          }
        });
      }
    },
    type: 'column'
  },

  ...

});

实时演示：https://jsfiddle.net/BlackLabel/0ma6efcz/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

将自定义标签添加到Highcharts中的轴上

1 个答案: