Question

我想动态更改基本柱形图中其中一列的边框宽度和边框颜色，类似于以下内容：

var chartingOptions = {
chart: {
    renderTo: 'container',
    type: 'column'
},
xAxis: {
    categories: ['5:1', '4:1', '3:1', '2:1', '1:1', '1:2', '1:3', '1:4', '1:5']
},
plotOptions: {
    column: {           
      grouping: false
    }
},
series: [
    {
    name: 'Serie 2',
    data: [20, 24, 30, 40, 60, 80, 90, 96, 100]},
{
    name: 'Serie 1',
    data: [100, 96, 90, 80, 60, 40, 30, 24, 20]}
            ]
};

var chart = new Highcharts.Chart(chartingOptions);

JSFIDDLE此处。

我试图直接通过

为第一个系列改变它

chart.series[0].data[2].series.borderColor = 'black'

但它没有更新系列。一切都有帮助！

Answer 1

您需要引用SVG元素并操作{{1and1}}参数。示例：http://jsfiddle.net/usLuzrwn/3/

Answer 2

chart.series[0].data[2].series.borderColor = 'black'不会做任何事情。而是试试 chart.series[0].data[2].series.color = 'black'但这也会改变工具提示的颜色。

为了明确改变一列的颜色，请尝试

data: [{ name: 'Point 1', color: '#00FF00', y: 0 }, { name: 'Point 2', color: '#FF00FF', y: 5 }]

有关详情，请点击此处http://api.highcharts.com/highcharts#series.data.color

你可以参考这个[小提琴] http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-bordercolor/

Answer 3

borderColor和borderWidth属性可用于系列对象，而不适用于数据对象。正如我所提到的，您可以在上面的链接中查看相同的文档。

但是，您可以通过在highcharts.js的源代码中定义这些属性来强制数据对象具有borderColor和borderWidth。

希望此信息有所帮助。

HighCharts：为一列动态设置特定的边框宽度和边框颜色

3 个答案: