highchart] 滚动条,给柱状图的柱子设置固定的宽度,HighCharts柱状图小数值不显示,柱子颜色线性渐变,控制highcharts饼图四周线的长短，highcharts 数据千分位不要空格

加入滚动条

引入 highstock.js （而不是 highchart.js）

import Highcharts from "highcharts";
import highstock from 'highcharts/modules/stock'
highstock(Highcharts);

设置 scrollbar.enabled = true （表示启用滚动条）
设置 xAxis.max，表示可视区域最多展现多少个数据点

new Highcharts.Chart({
xAxis: {
  max:30,// x轴多于30个出现滚动条
},
scrollbar:{// 设置滚动条样式
        enabled: true,
        height: 8,
        barBackgroundColor: "#d1d1d1",
        barBorderColor: "#d1d1d1",
        rifleColor: "#d1d1d1",
        barBorderRadius: 5,
        buttonBorderWidth: 0,
        buttonArrowColor: "rgba(0,0,0,0)",
      }
})

滚动时，y轴自动适配，为了更直观的展示数据，highCharts会根据当前显示在页面上的数据，自动调整y轴刻度，如果不希望自适应，可以设置y轴的最大最小值：

 yAxis: {
        min : Math.min(...dataLists.map(o => o.y)),// 数据的最小值
        max : Math.max(...dataLists.map(o => o.y)),// 数据的最大值
        }

出现的问题

问题1 这样配置以后, 滚动条是有了, 但是存在个问题, 这个滚动条无论你数据多少, 都会存在.
问题2 当设置了xAxis.max的值为10, 那么可视区域永远显示10个x轴的位置, 如果没有统计数据, 将用数字补位…

解决办法

假设现在x轴数据过多, 我在highchart初始化之前, 设定一些变量, 首先, 我们在后台获得x轴的数据之后, 对x轴数据的集合进行长度的判断:

var xList = ...(后台获得数据, json串之类);
var max_m = 10;   // 默认可视区域的x点个数
if (xList && xList.length < max ) {
    // 判断xList长度来解决上述问题2
    max_m = xList.length;
}
// 同样道理解决问题1
var flag = false; // 设置一个滚动条的开关,默认情况下关闭
if (max_m >= 10) {
    flag = true;
}

var chart = new Highcharts.Chart('container', {
    title: {
        text: '不同城市的月平均气温',
        x: -20
    },
    subtitle: {
        text: '数据来源: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: xList,
        // 解决问题2
        max : max_m
    },
    scrollbar: {
        //解决问题1
        enabled: flag
    },
    ....

给柱状图的柱子设置固定的宽度

plotOptions: {
          column: {
            borderWidth: 0,
            pointWidth: 16,  //16px 宽的列，无论图表宽度或数据点数量如何
          },
}

HighCharts柱状图小数值不显示

给柱子设置一个最小高

plotOptions: {
   series: {
     minPointLength: 3, // 两个数值相差较大时或值为零时显示默认像素高度的柱
}

柱子颜色线性渐变

官网

color: {
  linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
  stops: [
      [0, '#003399'],
      [1, '#3366AA']
  ]
}

控制highcharts饼图四周线的长短

plotOptions: {
	pie: {
		allowPointSelect: true,
		cursor: 'pointer',
		dataLabels: {
			distance: 10,//控制饼图外面的线的长短,为负数时文本内容在饼图内部
		}
	}
}

highcharts 数据千分位显示

// 写在 HighCharts.chart()的外面，所有的图表都会被统一设置
 HighCharts.setOptions({
   lang: {
     thousandsSep: ''  // 这里也可以写','，页面会显示为1,433
   }
 });
      

---

解决highchart滚动条的问题
highcharts做柱状图，怎样设置柱子宽度？
HighCharts柱状图小数值不显示
Highcharts小问题集合
HighCharts设置滚动条
控制highcharts饼图四周线的长短
highcharts 数据千分位显示和饼图的简单用法