javascript - 需要加入x轴和y轴标签highcharts

标签 javascript reactjs highcharts react-highcharts

我正在尝试连接面积样条图的 x 轴和 y 轴的节点。这是我的fiddle我还需要移动左上角的标题和副标题,并且需要集成下拉菜单。基本上我需要这样的图表 enter image description here .

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Total Visitors',
        x: 0,
    },
    subtitle: {
      text: 'This is all users that visited your site',
        x: 0,
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    tooltip: {
        shared: true,
        valueSuffix: ' units'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        },
        series: {
          marker: {
            enabled: false
          },
          lineWidth: 2,
          states: {
            hover: {
              enabled: false
            }
          }
        }
    },
    series: [{
      lineColor: '#8b8bff',
            color: '#c5c6ff',
            showInLegend: false,
            lineWidth: '4px',
        name: 'John',
        data: [37, 25, 50, 20, 37, 28, 50, 42, 70, 46, 55, 26]
    }]
})

请帮忙 谢谢!!!

最佳答案

要在同一位置开始轴刻度,请将 tickmarkPlacement 设置为 on,并设置 minmax

要将标题和副标题移动到左 Angular ,请使用 align 属性:

title: {
    ...,
    align: 'left'
},
subtitle: {
    ...,
    align: 'left'
},
xAxis: {
    tickmarkPlacement: 'on',
    min: 0.5,
    max: 10.5,
    ...
}

现场演示:https://jsfiddle.net/BlackLabel/w7p6rL8o/

API引用:https://api.highcharts.com/highcharts/title.align

关于javascript - 需要加入x轴和y轴标签highcharts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54939089/

相关文章:

reactjs - 默认禁用按钮单击事件不会在 reactjs 上触发

javascript - 如何使用 Hightchart-ng 制作 Highcharts 半圆 donut chart

javascript - Select2 选择功能显示先前的值

javascript - react native : How to prevent state variables from getting re-set on hot reload?

javascript - 如何基于 $scope.$watch 属性将 CSS 样式应用于指令内的 ng-repeat 元素?

php - 如何将 Reactjs 前端与 apache 服务器上的 php codeigniter 应用程序集成?

javascript - 如何创建具有可变宽度的重叠列的 JavaScript 柱形图

javascript - jQuery - Div 不适合页面内容

javascript - Angularjs $route.reload() 不工作

javascript - 如何使用 v-for 迭代元素