2016-12-18 26 views
1

ハイチャート内の列の1つの色を変更する必要があります。私はシリーズ全体で何を変えることができるかを見ていますが、それを1列だけ変更することはできませんでした。これは私のシリーズが行われる方法です。ハイチャートの列の色をデフォルトの色で変更してください

var dates = []; 
var scores = []; 
vm.data.values.forEach(function (item) { 
    dates.push(datefilter(item.date, 'yyyy-MM')); 

    if (item.isCurrent) { 
     scores.push({ 
      y: item.score || 0, 
      marker: { 
       fillColor: '#FF0000', 
       lineWidth: 5, 
       lineColor: "#FF0000" 
       } 
      }); 
    } 
    else { 
     scores.push(item.score || 0); 
    } 
}); 

vm.chartConfig = { 
      options: { 
       chart: { 
        type: 'column' 
       }, 
       plotOptions: { 
        series: { 
         cursor: 'pointer' 
         }, 
         marker: { 
          lineWidth: 1, 
          symbol: 'circle' 
         } 
        } 
       } 
      }, 
      title: { 
       text: "Scores" 
      }, 
      xAxis: { 
       categories: dates 
      }, 
      yAxis: { 
       title: { 
        text: null 
       } 
      }, 
      series: [ 
       { 
        name: 'Scores', 
        data: scores, 
        color: "#249858" 
       } 
      ] 
     }; 
    }; 

コンポーネントのHTMLは以下のようになります。

このコードで
<highchart config="vm.chartConfig"></highchart> 

、私は私だけが設定されてしまっただけで1色を見ることができましたchartConfigオブジェクトに追加します。 foreachループで自分のシリーズデータを作成している間に設定したものは有効になりません。任意のポインタまたはplunkrリンクは本当に素晴らしいでしょう。

答えて

0

同様の問題を抱えている人は、私が設定していた色は間違った場所にあります。

を変更OLD

if (item.isCurrent) { 
    scores.push({ 
     y: item.score || 0, 
     marker: { 
      fillColor: '#FF0000', 
      lineWidth: 5, 
      lineColor: "#FF0000" 
      } 
     }); 
} 
else { 
    scores.push(item.score || 0); 
} 
NEW CODEと

if (item.isCurrent) { 
    scores.push({ 
     y: item.score || 0, 
     marker: { 
      fillColor: '#FF0000', 
      lineWidth: 5, 
      lineColor: "#FF0000" 
      }, 
     color: '#FF0000' 
     }); 
} 
else { 
    scores.push(item.score || 0); 
} 

は私のためにトリックをしました。

注:私が保持しているマーカーの色は、線と縦棒グラフをレンダリングするためです。また、線グラフの場合はマーカーが機能し、列の場合は色が使用されます。

関連する問題