Question

我有一个使用Highcharts插件创建的柱形图，并且从SharePoint获取数据。它完美无缺，除了我想添加一个额外的功能。我希望同年的所有月份都是相同的颜色。例如，所有2013个月都是蓝色，2014绿色等。这是我的代码到目前为止：

JS

    var columnColors = ["#5179D6", "#66CC66", "#EF2F41", "#FFC700", "#61BDF2", "#FF7900", "#7588DD", "#2F5E8C", "#07BACE", "#BAE55C", "#BA1871", "#FFFFCC", "#BDE6FC", "#C7C7C7", "#ADA8FF", "#2FA675", "#33CCFF", "#6666FF", "#0099CC", "#FF9900", "#009999", "#669999", "#009933", "#FF9999", "#3366FF", "#FF6600", "51A9FF", "FF9800", "FF4700"];

chart = new Highcharts.Chart({
    colors: columnColors,

    chart: {
        renderTo: 'container',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },


    title: {
        text: ROCharts,
        x: -20, //center
    },
    credits: { enabled: false
    },

    plotOptions: {
        column: {
            dataLabels: {
                enabled: true,
                color: '#606060',
                style: {
                    fontFamily: '\'Lato\', sans-serif',
                    lineHeight: '11px',
                    fontSize: '10px'
                },
                formatter: function () {

                    if (this.y != 0 && (parameterChartsText === "Monthly Cost Savings" || parameterChartsText === "Monthly Expenditure")) {
                        return '<b>' + accounting.formatMoney([this.y], "$ ") + '</b>';
                    } else if (this.y != 0) {
                        return '<b>' + this.y + '</b> ' + currencySymbol;
                    }

                }
            },
            pointPadding: 0.2,
            borderWidth: 0,
            groupPadding: 0,
            shadow: false,
            colorByPoint: true //add different colors per column
        }
    },

    xAxis: {
        categories: monthsArray
    },
    yAxis: {
        gridLineColor: "#ddd",
        min: 0,
        title: {
            text: parameterChartsText + " " + currencySymbol
        }
    },
    subtitle: {
        text: 'This chart shows value from a SharePoint list using SPServices',
        x: -20
    },

    tooltip: {
        shared: true,
        pointFormat: '{series.name}: <b>{point.values}' + currencySymbol + '</b>{point.y}',
        valueDecimals: decimales,
        shared: true,
        useHTML: true,
    },

    exporting: {
        enabled: true,
        sourceWidth: 600,
        sourceHeight: 400,
        scale: 2
    },

    legend: {
        layout: 'vertical',
        enabled: true,
        align: 'right',
        verticalAlign: 'bottom',
        padding: 5,
        itemMarginTop: 10,
        itemMarginBottom: 5,
        itemStyle: {
            lineHeight: '14px'
        }
    },

    series: [{
        showInLegend: true,
        type: 'column',
        name: parameterChartsText,
        data: valuesArray
    }]
});

Chart

有什么想法吗？谢谢！

Answer 1

替代解决方案：

每年制作一个单独的系列。默认情况下，每年的颜色会不同。

在这种情况下，您需要在数据中指定x值。

example：

http://jsfiddle.net/jlbriggs/uLo7f6nf/

另一个我认为最好的选择是让所有列都保持相同的颜色，而是每年通过添加一个绘图带来交替背景：

http://jsfiddle.net/jlbriggs/uLo7f6nf/3/

另一种方法可能是两者之间的中间立场：为图表提供两种稍微不同的颜色，这样每年都会在两种颜色的颜色之间交替。

这种方法允许用户区分年份，但不会因不必要的颜色组合而使用户过载：

http://jsfiddle.net/jlbriggs/uLo7f6nf/5/

Answer 2

对于valuesArray中的每个点，您应该设置颜色属性。现在每列都有这种颜色。 Highcharts在选项中没有colorByMonth或类似的东西。

另一种解决方案是设置颜色数组，并将每种颜色复制12次：

var columnColors = ["#5179D6", "#5179D6", "#5179D6", "#5179D6", "#5179D6", "#5179D6", "#5179D6", "#5179D6", "#5179D6", "#5179D6", "#5179D6", "#5179D6",
                    "#66CC66", "#66CC66", "#66CC66", "#66CC66", "#66CC66", "#66CC66", "#66CC66", "#66CC66", "#66CC66", "#66CC66", "#66CC66", "#66CC66",
                    "#EF2F41",  ... ];


chart = new Highcharts.Chart({
    colors: columnColors,
    ...
});

Highcharts将不同的背景颜色应用于每年的所有月份

2 个答案: