gpt4 book ai didi

javascript - 堆叠列未与 Highcharts 对齐

转载 作者:行者123 更新时间:2023-11-28 10:02:13 24 4
gpt4 key购买 nike

我正在使用 highcharts 来绘制一系列数据。然而,我在将系列排列在彼此之上时遇到问题,因为列稍微未对齐。我的代码如下:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="highcharts.js"></script>

<script type="text/javascript">

// global vars
col1 = '#7B7B7B';
col2 = '#FFFFFF';

// Set chart options
Highcharts.setOptions({
chart: { defaultSeriesType: 'column', backgroundColor: "rgba(0,0,0)" },
plotOptions: { column:{ stacking: 'normal' }},
title: { text: ''},
legend: {enabled: false}
});

// Initialize charts
function createCharts(){
chart1 = new Highcharts.Chart({
chart: { renderTo: 'chart-1' },
xAxis: { categories: ['now.', 'then.'] },
yAxis: { title: {style: {color: '#FFFFFF'},
text: '[Total Amount]' },
min: 0 },
series: [{name: 'Measure_A', data: [0, 0], pointWidth: 28},
{name: 'Measure_B', data: [0, 0], pointWidth: 28}]
});
}

// update charts
function updateCharts(){

old_A = chart1.series[0].data[0].y;
old_B = chart1.series[1].data[0].y;

A = Math.random() * 10;
B = Math.random() * 10;

chart1.series[0].setData([{color: col1, name: 'Measure_A', y: A, pointWidth: 28},
{color: col2, name: 'Measure_A', y: old_A, pointWidth: 28}]);
chart1.series[1].setData([{color: col1, name: 'Measure_B', y: B, pointWidth: 28},
{color: col2, name: 'Measure_B', y: old_B, pointWidth: 28}]);}



</script>
<body onload="createCharts();">
<div id="chart-1" style="width:250px; height:150px"></div>
<button type="button" id="button-1" onclick="updateCharts()">Update chart</button>
</body>
</html>

为了说明问题,每次按下按钮时,我都会向图表添加一系列数据,当前数据位于左侧。我想为每一列使用相同的颜色,并且只是使用一条线来划分栏中的空格。但是,列堆栈似乎稍微未对齐,我不确定为什么。

enter image description here

编辑:我已经添加了 link一个 fiddle ,但奇怪的是这个问题在这里不存在。

最佳答案

如果边框出现问题,您可能需要尝试使用 1px 高度的背景图像来显示条形之间的分隔。我知道这不是理想的情况,但最终它可能会解决问题。

关于javascript - 堆叠列未与 Highcharts 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8980238/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com