自定义HighCharts中各个系列的颜色 [英] Customizing the colors of individual series in HighCharts

问题描述

我使用HighCharts作为折线图，并且正在尝试更改每个系列的线条颜色。我确实在这里找到了这个例子但数据是硬编码的。我的数据从Sql数据库中提取出来，并使用一些VB代码传递给HTML页面。

  var chart; 
 $（document）.ready（function（）{
 chart = new Highcharts.Chart（{
 chart：{
 renderTo：'container'，
 defaultSeriesType： '列'
}，
标题：{
 text：'图表标题'
}，
副标题：{
 text：'图表副标题'
}，
 xAxis：{
 categories：[<％= GraphDate％>] 
，
标签：
 {
 rotation： -45，
 align：'right'，
 style：
 {
 
} 
} 
}，
 y轴心： {
 min：160，
 title：{
文本：'Temp'
} 
}，
图例：{
 layout：'vertical'，
 backgroundColor：'#FFFFFF'，
 align： 'left'，
 verticalAlign：'top'，
x：400，
y：0，
 floating：true，
 shadow：true 
}，
 tooltip：{
 formatter：function（）{
 return''+ 
 this.x +'：'+ this.y +'ºC'; 
} 
}，
 plotOptions：{
列：{
 pointPadding：0.2，
 borderWidth：0 
} 
} ，
系列：
 
 [<％= GraphSeries％>]，
}）; 
  

我尝试使用其他帖子来设置它的样式，但它无法生成图表。主要问题是，线图有两个系列，所以下面的方法会设置我假设的两个系列的颜色？那么，我是否可能需要以某种方式在我的vb代码中格式化该系列？

 系列：[{
 color：'yellow'，
 data：[
 [ <％= GraphSeries％>] 
]}，
  

编辑：

$ p $ $（document）.ready（function（）{
chart = new Highcharts.Chart（{
colors： ['＃4572A7'，'＃AA4643'，'＃89A54E'，'＃80699B'，'＃3D96AE'，'＃DB843D'，'＃92A8CD'，'＃A47D7C'，'＃B5CA92']

图：{
renderTo：'container'，
defaultSeriesType：'column'
}


解决方案

顶级配置可以包含 colors 字段。挑选。

请看这里。

这里是我的项目中的工作片段

  var chart; 
 $（docu （）{
 chart = new Highcharts.Chart（{
图：{
 renderTo：'perfchart'，
 type：'line'，
 marginRight：130，
 marginBottom：25 
}，
 colors：['＃0000FF'，'＃0066FF'，'＃00CCFF']，
 title：{
 text：'Historical system performance'，
x：-20 // center 
}，
  

外观：

I am using HighCharts for a line graph and i am attemping to change the line color for each series. I did find this example here but the data is hard coded. My data is pulled from an Sql database and passed to the HTML page using some VB code.

        var chart; 
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'column'
                },
                title: {
                    text: 'Chart Title'
                },
                subtitle: {
                    text: 'Chart subtitle'
                },
                xAxis: {
                    categories: [<%= GraphDate %>]
                    ,
                    labels:
                    {
                        rotation: -45,
                        align: 'right',
                        style:
                        {

                        }
                    }
                },
                yAxis: {
                    min: 160,
                    title: {
                        text: 'Temp'
                    }
                },
                legend: {
                    layout: 'vertical',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 400,
                    y: 0,
                    floating: true,
                    shadow: true
                },
                tooltip: {
                    formatter: function () {
                        return '' +
                            this.x + ': ' + this.y + ' ºC';
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: 

                [<%= GraphSeries %>],
            });

I tried to style it using the other post however it failed to generate a chart. The main problem is though, the line graph has two series, so the below method would set the color for both series i assume? So, would i maybe need to format the series in my vb code somehow?

series: [{ 
    color: 'yellow',
    data: [
        [<%= GraphSeries %>]
    ]},

Edit:

$(document).ready(function () {
            chart = new Highcharts.Chart({
            colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92']

                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'column'
                }

解决方案

Top level config can contain colors field. It's an array from which series colors will be picked.

See here.

Here's working piece from my project

var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart:{
            renderTo:'perfchart',
            type:'line',
            marginRight:130,
            marginBottom:25
        },
        colors: ['#0000FF', '#0066FF', '#00CCFF'],
        title:{
            text:'Historical system performance',
            x:-20 //center
        },

Appearance:

这篇关于自定义HighCharts中各个系列的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！