我应该选择哪种图表类型来显示2个日期之间的值变化？

Question

我使用的是Highcharts,但我的问题一般.我想知道哪个图表是完美匹配,以显示2个日期之间的值的变化.

例如贷款利率,例如29-Aug:21.2 30-Aug:21.3

变化是10万.

我应该选择哪种图表类型来显示这一点差异显而易见.

Answer 1

如果您要比较两个日期/值,我建议使用条形图.(如果您要比较数月或数年的数值,我建议使用线或面积图.)您可以通过指定最小值,最大值和步长值来更好地强调两个贷款利率值之间的差异,以便0.1可以清楚地说明百万差异.请参阅以下演示:

var myConfig = {
  type: 'bar',
  title: {
    text: 'Lending Rate',
    fontFamily: 'Georgia'
  },
  utc: true,
  timezone: 0,
  scaleX: {
    transform: {
      type: 'date',
      all: '%M %d, %Y'
    },
    step: 86400000,
    item: {
      fontSize: 10
    }
  },
  scaleY: {
    values: '21.1:21.4:0.1',
    format: '%vM',
    decimals: 1,
    item: {
      fontSize: 10
    },
    guide: {
      lineStyle: 'dotted'
    }
  },
  plot: {
    barWidth: '50%',
    borderWidth: 1,
    borderColor: 'gray',
    backgroundColor: '#99ccff',
    valueBox: {
      text: '%v million',
      fontSize: 12,
      fontColor: 'gray',
      fontWeight: 'normal'
    },
    tooltip: {
      text: '%v million'
    }
  },
  series: [
    {
      values: [
        [1472428800000, 21.2],
        [1472515200000, 21.3],
      ]
    }
  ]
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});

<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>

<div id='myChart'></div>

有关比例自定义和格式设置的更多信息,请参阅此X/Y轴比例教程.的储值箱和工具提示还可以用于提供关于所述节点值的进一步信息.

希望有所帮助.我是ZingChart团队的成员,很乐意回答更多问题.

Answer 2

带有数据标签来指示相应值的简单条形图将有助于向用户显示值的变化非常小。

请参阅下面的代码片段。我用您的示例值修改了条形图的基本 Highcharts 演示之一。

我希望这对您有帮助！

$(function () {
    $('#container').highcharts({
        chart: { type: 'bar' },
        title: { text: 'Sample Chart' },
        xAxis: {
            categories: ['29-Aug','30-Aug'],
            title: { text: null }
        },
        yAxis: { min: 0 },
        tooltip: { valueSuffix: ' million' },
        plotOptions: {
            bar: {
                dataLabels: {
                    crop: false,
                    overflow: 'none',
                    enabled: true,
                    style: { fontSize: '18px' }
                }
            }
        },
        legend: { enabled: false },
        credits: { enabled: false },
        series: [{
            name: 'Sample Series',
            data: [21.2,21.3]
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 450px; height: 250px; margin: 0 auto"></div>