Question

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

例如贷款利率 8月29日：21.2 8月30日：21.3

变化是10万。

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

Answer 1

如果您要比较两个日期/值，我建议您使用bar chart。（如果您要比较几个月或几年的价值，我建议使用line或area图表。）您可以更好地强调两个贷款利率值之间的差异{{3}这样可以清楚地说明10万的差异。请参阅以下演示：

＆＃13;

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 
});

＆＃13;

<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>

<div id='myChart'></div>

＆＃13;

有关规模自定义和格式设置的更多信息，请参阅此specifying the minimum, maximum, and step scale values。 X/Y-Axis Scales Tutorial和value boxes也可用于提供有关节点值的更多信息。

希望有所帮助。我是tooltips团队的成员，很乐意回答其他问题。

Answer 2

带有数据标签的简单条形图可以显示相应的值，这有助于向用户显示价值变化非常小。

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

我希望这对你有所帮助！

＆＃13;

$(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]
        }]
    });
});

＆＃13;

<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>

＆＃13;

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

2 个答案: