HighCharts - 顯示xaxis標題

我正在使用highcharts，但首先讓我解釋一下。圖表需要這些項目/選項 - 每個條應該有它自己的寬度（完成）
- 每個條應該有它自己的顏色（完成）
- 與avarage水平（完成）
HighCharts - 顯示xaxis標題

一個線然而，有一件事我不能工作：在x軸上需要條的名稱（如：http://www.highcharts.com/demo/column-rotated-labels）。

我試過不同的方法，如果我使用方法1，我不能設置自定義欄寬度，如果我使用方法2我不能在x軸上設置標題。任何人有個想法？

我迄今爲止代碼：

$(function() { 
// Create the chart 
$('#container').highcharts({ 
    chart: { 
     type: 'column', 
    }, 
    credits: { 
     enabled: false, 
    }, 
    title: { 
     text: '' 
    }, 
    xAxis: { 
     type: 'category', 
     title: { 
      text: 'Kerntaken', 
     }, 
     labels: { 
      enabled: true, 
     }, 
     categories: ['Apples', 'Bananas', 'Oranges'] 
    }, 
    yAxis: [{ 
     title: { 
      text: 'Gemiddeld niveau', 
     }, 
     allowDecimals: false, 
     plotLines: [{ 
      color: 'black', 
      value: '2', // Insert your average here 
      width: '1', 
      zIndex: 5, // To not get stuck below the regular plot lines 
      label: { 
       text: 'gemiddeld niveau', 
       align: 'right', 
       y: 12, 
       x: 0 
      } 
     }], 
    },{ 
     title: { 
      text: '' 
     }, 
     allowDecimals: false, 
    },{ 
     title: { 
      text: '' 
     }, 
     allowDecimals: false, 
    },{ 
     title: { 
      text: '', 
     }, 
     opposite: true, 
    }], 
    legend: { 
     enabled: false 
    }, 

    tooltip: { 
     pointFormat: '<b>{point.y:.2f}</b><br/>', 
    }, 

    series: [{ 
     name: "Kerntaken", 
     colorByPoint: true, 
     colors: ['#c8173c', '#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
     pointWidth: 20, 
     data: [{ 
      name: "Adviseren", 
      y: 3.2, 
      drilldown: "Adviseren", 
     }], 
    }, { 
     name: "Kerntaken", 
     colorByPoint: true, 
     colors: ['#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
     pointWidth: 50, 
     data: [{ 
      name: "Analyseren", 
      y: 1.5, 
      drilldown: "Analyseren", 
     }] 
    }, { 
     name: "Kerntaken", 
     colorByPoint: true, 
     colors: ['#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
     pointWidth: 30, 
     data: [{ 
      name: "Organiseren", 
      y: 3.9, 
      drilldown: "Organiseren", 
     }] 
    }, { 
     name: 'CP niveau', 
     type: 'spline', 
     data: [2], 
     tooltip: { 
      headerFormat: 'gemiddeld niveau<br>', 
     }, 
    }], 
});

我與我的代碼到目前爲止小提琴：https://jsfiddle.net/Mik3yZ/L181kpqt/2/

來源

2015-10-15 Mike van Hoof

在您的代碼鑽取id中，但沒有向下鑽取sereis，您真的需要深入鑽取系列還是錯誤地進行了深入鑽取？ –

我需要向下鑽取，只能將其刪除，因爲它與此問題無關 –

我會使用下面的答案之一。只有一件事是缺少'plotOptions.column.grouping = false'，請參閱：http://jsfiddle.net/xkjqtcq3/2/;） –

您不必使用零填充數據，也不用零填充數據，但您可以簡單地在點上提供x索引。我不知道，如果這是真正適合你的使用情況有向下鑽取（和分類軸），但可能是不夠的：

數據

例子：

series: [{ 
    name: "Kerntaken", 
    colorByPoint: true, 
    colors: ['#c8173c', '#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 20, 
    data: [{ 
     x: 0, // added x-position 
     name: "Adviseren", 
     y: 3.2, 
     drilldown: "Adviseren", 
    }], 
}, { 
    name: "Kerntaken", 
    colorByPoint: true, 
    colors: ['#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 50, 
    data: [{ 
     x: 1, // added x-position 
     name: "Analyseren", 
     y: 1.5, 
     drilldown: "Analyseren", 
    }] 
}, { 
    name: "Kerntaken", 
    colorByPoint: true, 
    colors: ['#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 30, 
    data: [{ 
     x: 2, // added x-position 
     name: "Organiseren", 
     y: 3.9, 
     drilldown: "Organiseren", 
    }] 
}, { 
    name: 'CP niveau', 
    type: 'spline', 
    data: [2], 
    tooltip: { 
     headerFormat: 'gemiddeld niveau<br>', 
    }, 
}],

現在，正如我之前所說的，禁用從列分組：

plotOptions: { 
    column: { 
    grouping: false 
    } 
}

和工作演示：http://jsfiddle.net/xkjqtcq3/3/

額外注：

您的代碼中有很多額外的逗號，請注意它會在IE中導致錯誤< 9。

來源

2015-10-20 16:28:23

您需要更改系列數據格式是這樣的。由於您使用的是多個系列，因此您應該爲每個系列設置映射類別值（此處爲null）以顯示相應的x軸標籤。

series: [{ 
     name: "Kerntaken", 
     pointWidth: 20, 
     data: [3.2,null,null] 
    }, { 
     name: "Kerntaken", 
     pointWidth: 50, 
     data: [null,1.5,null] 
    }, { 
     name: "Kerntaken", 
     pointWidth: 30, 
     data: [null,null,3.9] 
    }]

這裏是更新的Fiddle，希望這會有所幫助。

來源

2015-10-15 20:24:45 Nimmy

嗨Nimmy，與上面Perdo的回答一樣：我的確也嘗試過這種方式。這個解決方案的東西是酒吧沒有居中。第一個酒吧左對齊，第二個在中間，第三個在右邊。 –

嗨，你能檢查是否這是你想要的嗎？

我改變了你的序列數據，以這樣的：

{ 
    name: "Apples", 
    colorByPoint: true, 
    colors: ['#c8173c', '#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 20, 
    data: [3.2, 0, 0], 
}, { 
    name: "Bananas", 
    colorByPoint: true, 
    colors: ['#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 50, 
    data: [0, 1.5, 0] 
}, { 
    name: "Oranges", 
    colorByPoint: true, 
    colors: ['#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'], 
    pointWidth: 30, 
    data: [0, 0, 3.9] 
}

你被給予data一個對象，但它預期的數組。我在值中設置了0來平衡其他列中的集合。

在第一個對象data屬性中，第一個值是針對第一列中的蘋果的。如果你改變第二個值，你會在第二列中得到蘋果，等等。在這fiddle你有所有列中的蘋果。

這是更新的fiddle爲您的答案。

來源

2015-10-15 21:22:03 RageAgainstTheMachine

感謝您的這一點，我確實也嘗試過這種方式。這個解決方案的東西是酒吧沒有居中。第一個酒吧左對齊，第二個在中間，第三個在右邊。 –

HighCharts - 顯示xaxis標題

回答

相關問題