设置highcharts x轴间隔

var series_1 = [12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,];
// 设置x轴间隔（当不同数据时，间隔也不同）x轴最多为10位
var minTickInterval_1 = (series_1.length/10).toFixed(0);
var chart = Highcharts.chart('container', {credits: {enabled: false // 禁用版权信息},// 标题title: {useHTML: true,text: '<span style="font-weight: 700">CPU利用率<span style="color: #eaeaea">（%）</span></span>',align: 'left',// 水平对齐方式style: {fontSize: '12px','font-weight': 700}},// 副标题subtitle: {text: ''},// X轴xAxis: {title: {text: ''},// 数据项categories: ['11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23','11:06:23','12:06:23','13:06:23','13:06:34','13:07:23','14:06:34','15:06:23','16:06:34','17:06:23','18:06:23',],// 间隔配置参数minTickInterval: minTickInterval_1},// Y轴yAxis: {title: {text: ''}},// 数据列series: [{name: "CPU利用率",color: '#2d8cf0',data: series_1,// 线宽lineWidth: 1,cursor: 'pointer', // 鼠标样式dashStyle: 'Solid', // 线条样式type: 'spline',  // 线条平滑为曲线}],// 数据列配置 每条折现以不同图标显示（三角形、圆形等） 折现数据上的数据点plotOptions: {series: {marker: {radius: 2, // 大小enabled: true,  // 为true时，自定义显示 下方label无效states: {// 状态hover: {radius: 5,lineWidthPlus: 1}}},// 使用label需去除marke属性// label: {//     connectorAllowed: true// }// pointStart: 2010  // 如果没有为数据列中提供x值，则pointStart定义要开始的值。}},// 图例（折线数据名字）legend: {itemStyle: {fontWeight: 400}},tooltip: {shared: true,   // 鼠标滑过是否显示全部数据crosshairs: false,  // true：鼠标滑过，为长方形背景// 配置鼠标划过时标示线crosshairs: [// 横向标示线{width: 1,color: '#ccc'},]},// 响应式// responsive: {//     rules: [{//         // 响应条件//         condition: {//         },//         // 图表配置//         chartOptions: {//         }//     }]// }
});

设置highcharts x轴间隔相关推荐

matplotlib 多子图的画法 - 设置坐标范围 - 设置坐标的显示间隔 - 设置figure的大标题 - 设置x轴和y轴的名称 - df.groupby
前言本文实现的功能: 多子图的画法设置坐标范围设置坐标的显示间隔设置figure的大标题设置x轴和y轴的名称
Echarts 分段设置X轴间隔，步长 - 模拟实现
目录需求原因: 需求效果: html代码: 使用到的数据: 需求原因: 由于数据前一段对应的Y值变化比较大,后一段对应Y值变化比较小,客户只关注前一段的Y值变化,于是想到分段设置X轴间隔,由于官方没 ...
Apache POI 生成折线图+柱状图设置双Y轴并导出word文档
实际项目中遇到的问题,相关信息实在较少,怕自己忘记,菜鸟记录一下我设置的是双Y轴的组和图表.左侧为折线图Y轴,右侧为柱状图Y轴. 直接上代码. // An highlighted block pub ...
echarts中设置双Y轴左右刻度线一致
echarts中设置双Y轴左右刻度线一致一.效果图二.主要代码一.效果图二.主要代码 this.taskxAxis = []this.taskSeries = [[], []]taskInit ...
python使用matplotlib可视化、为可视化图像的X轴和Y轴设置自定义的轴标签（axis labels of matplotlib plot）
python使用matplotlib可视化.为可视化图像的X轴和Y轴设置自定义的轴标签(axis labels of matplotlib plot) 目录
html照片与照片之间的间隔,css设置图片之间的间隔的方法
css设置图片之间的间隔的方法发布时间:2021-01-05 09:32:24 来源:亿速云阅读:116 作者:小新这篇文章将为大家详细讲解有关css设置图片之间的间隔的方法,小编觉得挺实用的, ...
动态设置echarts Y轴最大刻度与最小刻度
动态设置echarts Y轴最大刻度与最小刻度 yAxis: { max: function (value) { return (value.max + 0.01 * (value.min)).toF ...
Highcharts X轴名称太长，如何设置下面这种样式
Highcharts所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过chart.inverted = true 可以让x,y轴 ...
HighCharts: 设置时间图x轴的宽度
这个x轴宽度的设置整了好久,被老板催的要死 highcharts的api文档很难找,找了半天也没找到,网上资料少,说的试了下,也没有,我用的图里api文档里没有介绍,这个属性不知道的话,根本不好找.为 ...

设置highcharts x轴间隔

设置highcharts x轴间隔

设置highcharts x轴间隔相关推荐

最新文章

热门文章