VueアプリでHighchartsを使用しています。 highcharts-vue Highchartsます
テンプレートをこのように設定しています
<highcharts class="vessChart" ref="chart" style="width:100%" :callback="chartcallback" :options="options" ></highcharts>
Vueでチャートのオプションを設定します
yAxis:[],
series:[],
background:[],
options: {
chart: {
borderWidth: 1,
marginLeft: 40,
marginRight: 2,
type:'line',
zoomType: 'x',
title: {
text: ''
},
panning:true
/*backgroundColor:'lightgrey'*/
},
title: {
text: ''
},
pane:{
background:[]
},
time:{
useUTC:true
},
credits:{
enabled:false
},
tooltip: {
shared: true
},
title:{
text:null
},
rangeSelector: {
inputEnabled: false
},
xAxis:{
type:'datetime',
title:
{
align:'high'
},
labels: {
padding: 50,
format: '{value:%e %b %Y}',
style: {
fontSize: '10px'
}
},
crosshair: {
enabled: true,
width: 2,
color: '#000'
},
},
yAxis: [],
plotOptions: {
series: {
animation: false
}
},
,series: []
}
次に、追加するデータがある場合は、それに応じてデータをyAxis、系列、および背景配列にプッシュします
this.data.titles.forEach(title => {
this.yAxis.push(
{
title: {
text: title.title,
margin:20,
fontSize:"15px"
},
labels: {
enabled:true,
align: 'left',
padding:15
},
alignTicks:'left',
textAlign:'left',
align:'middle',
height: chartHeight+'%',
top:topStep+'%',
opposite:false,
offset:0
}
);
this.background.push({backgroundColor: "red"});
topStep = topStep + chartHeight + 5;
this.series.push({
yAxis:counter,
name:title.title,
data:[]
});
counter++;
});//foreach
this.options.yAxis = this.yAxis;
this.options.series = this.series;
this.options.pane = this.background;
私はハイチャートをもっとインポートしようとしました
import highchartsmore from './highcharts-more.js'
しかし、機能しません。ページは白に戻ります。私はまた、Vueのindex.htmlに移動して追加してインポートしようとしました<script src="https://code.highcharts.com/highcharts-more.js"></script>
ページにエラーはありませんが、ペインにはまだ色がありません。
*これが不可能な場合は、少なくともペインの間に線を追加できますか?
ありがとう
編集
このようにデバッグするのは難しいです。役立つフィドルをコードで提供できる場合。
—
ジュネイド氏が発疹
私が取り組むことができるオンラインであなたのコードを再現してください。使用できるテンプレートは次のとおり
—
SebastianWędzel
@SebastianWędzelこれをチェックしてください。ペイン関連のコードを削除して「チャートの更新」を押すと、新しいデータが表示されます。codesandbox.io/s/vue-template-40b4z
—
codebot
このデモはうまく機能しないと思います。直してもらえますか?
—
SebastianWędzel