【问题标题】:Highcharts: basic column chart not showing correct colorHighcharts:基本柱形图未显示正确颜色
【发布时间】:2013-07-04 16:07:33
【问题描述】:

下面是我显示基本柱形图的代码。

$(function () {
 Highcharts.setOptions({
colors: ['#f89422','#8cc641']

});

    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb'
                               ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            colorbypoint: true,
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5]

        }]
    });
});

虽然我在设置选项中给出了 2 种颜色,并且在 plotOptions 中给出了 colorBypoint: true, 它显示相同的颜色。橙色。

有什么想法吗?请参考这个小提琴 - http://jsfiddle.net/88YSd/

【问题讨论】:

    标签: highcharts


    【解决方案1】:

    这些点显示的颜色与它们在同一系列中的颜色相同。

    您可以像这样指定单独的点颜色:

     data: [{y:49.9,color:'#f89422'}, {y:71.5,color:'#8cc641'}]
    

    http://jsfiddle.net/Zhmw2/

    另一种方法是将两个点放在不同的系列中

     series: [{
                name: 'Jan',
                data: [49.9]
    
            },{
                name: 'Feb',
                data: [71.5]
    
            }
    

    http://jsfiddle.net/H5KmK/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-11-23
      • 2022-01-14
      • 1970-01-01
      • 1970-01-01
      • 2017-02-09
      相关资源
      最近更新 更多